/* Home v2 — a home E o catalogo.

   Fica num arquivo proprio: a v1 (index.html + style.css) continua de pe para
   comparacao, e nada daqui pode quebra-la. O que se reaproveita da v1 e o
   header, o footer e a marca; o resto e desta pagina.

   Prefixo `tk2-` em tudo, porque `.tk-barra`, `.tk-vazio` e `.tk-lista` ja
   existem no style.css e ja roubaram estilo uma vez.

   Cores: amarelo #FCAF17 e so acao (botao). Verde #0F7B3C e so vantagem
   verificavel (abaixo da FIPE, KM baixo). Na v1 tudo era amarelo e por isso
   nada se destacava. */

.tk2 { background: #F2F2F3; }
.tk2-dentro { max-width: 1400px; margin: 0 auto; padding: 0 32px; }
.tk2-oculto {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.tk2-rotulo {
  margin: 0 0 14px;
  font-size: 14px; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; color: #6B6B6D;
}
.tk2-rotulo--claro { color: #FCAF17; }

/* ============================================================
   CAPA — 300px contra os 630 da v1
   ============================================================ */
.tk2-capa { position: relative; overflow: hidden; background: #2E2D2F; }
.tk2-capa-fotos { position: absolute; inset: 0; }
.tk2-capa-foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 62% center;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.tk2-capa-foto.is-vendo { opacity: 1; }
/* a foto e clara: sem o veu o texto branco nao passa de 2:1 */
.tk2-capa-veu {
  position: absolute; inset: 0;
  background: linear-gradient(95deg, rgba(25,24,26,.94) 0%, rgba(25,24,26,.88) 38%, rgba(25,24,26,.35) 72%, rgba(25,24,26,.15) 100%);
}
/* o conteudo precisa de ar: com 42px o kicker, o titulo e a busca
   ficavam colados uns nos outros */
.tk2-capa-dentro { position: relative; padding-top: 58px; padding-bottom: 58px; }
.tk2-capa-kicker {
  margin: 0 0 14px;
  font-size: 13px; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase; color: #FCAF17;
}
.tk2-capa-h1 {
  margin: 0 0 16px;
  font-size: clamp(30px, 3.2vw, 46px); font-weight: 900; line-height: 1.04;
  letter-spacing: -.02em; text-transform: uppercase; color: #fff;
}
/* O subtitulo da capa do /seminovos nao tinha regra nenhuma: herdava o
   cinza do corpo e, sobre a foto, sumia. Cor clara, largura limitada e
   margem propria antes da busca. */
.tk2-capa-sub {
  margin: 0 0 30px;
  max-width: 62ch;
  font-size: clamp(15px, 1.15vw, 17.5px); line-height: 1.6;
  color: rgba(255,255,255,.82);
}

/* a busca e a primeira coisa que a pessoa procura: fica na capa, grande */
.tk2-busca { display: flex; max-width: 780px; background: #fff; border: 2px solid #fff; }
.tk2-busca-campo { flex: 1; min-width: 0; display: flex; align-items: center; }
.tk2-busca input {
  flex: 1; min-width: 0; border: none; outline: none;
  padding: 16px 12px 16px 20px;
  font-family: 'Cairo', sans-serif; font-size: 16.5px; color: #2E2D2F;
}
/* o X nativo do type=search brigaria com o microfone no mesmo canto */
.tk2-busca input::-webkit-search-cancel-button { display: none; }
/* Amarelo e a cor de ACAO no site, e este e o botao principal do topo.
   Estava grafite, com o amarelo so no hover — sobre a foto escura do
   banner ele sumia, e o olho nao achava onde apertar. O microfone dentro
   do campo continua neutro de proposito (ver .tk2-voz). */
.tk2-busca button {
  display: flex; align-items: center; gap: 10px;
  border: none; background: #FCAF17; color: #2E2D2F;
  padding: 0 32px;
  font-family: 'Cairo', sans-serif; font-size: 16px; font-weight: 800;
  cursor: pointer;
  transition: background .15s ease;
}
.tk2-busca button:hover { background: #E89E0C; color: #2E2D2F; }
.tk2-busca button:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }
.tk2-busca svg { width: 19px; height: 19px; }

/* ============================================================
   ATALHOS — cada um e uma busca inteira
   ============================================================ */
.tk2-atalhos { background: #fff; border-bottom: 1px solid #E3E3E4; }
.tk2-atalhos .tk2-dentro { padding-top: 26px; padding-bottom: 26px; }
/* Quatro BOTOES numa linha, com o que eles fazem escrito primeiro e a
   quantidade depois, pequena.

   Ja foram cinco caixas iguais, e depois um bloco verde grande com o
   numero em 68px e cartoes com "38" sozinho no alto. O cliente achou
   confuso, e com razao: quem nao e de internet le o numero antes do
   rotulo e nao sabe do que se trata — "38" de que? E o bloco tinha
   ~290px de altura para quatro atalhos. Agora sao ~64px, e a frase se
   le na ordem natural: "Rodaram pouco · 38 caminhoes". */
.tk2-atalhos-grade {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.tk2-atalho {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  column-gap: 12px;
  border: 1.5px solid #DCDCDD; background: #fff;
  padding: 14px 18px; min-height: 72px; box-sizing: border-box;
  color: #2E2D2F; text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.tk2-atalho:hover { border-color: #2E2D2F; }
.tk2-atalho-i { grid-row: 1 / span 2; display: grid; place-items: center; color: #414042; }
.tk2-atalho-i svg { width: 26px; height: 26px; display: block; }
/* letra maior que o padrao do site: o publico tem 40 anos ou mais e nao
   e de internet. 19px no rotulo e 15.5 na contagem leem sem forcar a
   vista num celular segurado a distancia */
.tk2-atalho-t { font-size: 19px; font-weight: 800; line-height: 1.2; }
.tk2-atalho-n { font-size: 15.5px; color: #4E4E50; margin-top: 2px; }
.tk2-atalho-n b { font-weight: 800; color: #2E2D2F; }

/* o da FIPE continua sendo o destaque, mas pela cor, nao pelo tamanho:
   do mesmo porte que os outros, ele nao empurra a vitrine para baixo */
.tk2-atalho--bom { border-color: #0F7B3C; background: #0F7B3C; color: #fff; }
.tk2-atalho--bom:hover { border-color: #0B5C2D; background: #0B5C2D; }
.tk2-atalho--bom .tk2-atalho-i { color: #fff; }
.tk2-atalho--bom .tk2-atalho-n { color: #D8F0E2; }
.tk2-atalho--bom .tk2-atalho-n b { color: #fff; }

/* ============================================================
   CATALOGO
   ============================================================ */
.tk2-grade {
  display: grid; grid-template-columns: 274px minmax(0, 1fr);
  gap: 26px; align-items: start;
  padding-top: 28px; padding-bottom: 56px;
  scroll-margin-top: 76px;
}

/* ---- filtros ---- */
/* A coluna ROLA COM A PAGINA. Nao e sticky, e nao tem rolagem propria.

   Chegou a ter as duas coisas, e foi erro meu. O conteudo do filtro tem
   ~1.670px (sao 22 opcoes a 44px de alvo de toque), numa janela de 950:
   sticky so funcionaria junto com rolagem interna, e duas areas de
   rolagem na mesma tela criam o "scroll trap" — a roda do mouse sobre o
   filtro rola o filtro em vez da pagina, e a pessoa trava sem entender.

   E por isso que Mercado Livre e Amazon deixam a coluna rolar com a
   pagina. O acesso ao que esta ligado sem voltar ao topo e resolvido
   pelos CHIPS de filtro aplicado, no topo dos resultados, que ja
   existem aqui. No celular a historia e outra: la e gaveta, e gaveta
   rola por dentro mesmo. */
.tk2-lado { background: #fff; border: 1px solid #E3E3E4; }
/* "Ver N caminhões" so existe na gaveta do celular: no desktop a lista
   ja esta ao lado, e um botao para "ver" o que ja esta na tela confunde */
.tk2-lado-aplicar { display: none; }
.tk2-lado-topo {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid #E3E3E4;
}
.tk2-lado-topo h2 {
  margin: 0; flex: 1;
  font-size: 15px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
}
.tk2-limpar {
  background: none; border: none; padding: 0;
  font-family: 'Cairo', sans-serif; font-size: 13px; font-weight: 700;
  color: #8A5D00; text-decoration: underline; cursor: pointer;
}
.tk2-lado-x { display: none; background: none; border: none; padding: 4px; color: #2E2D2F; cursor: pointer; }
.tk2-lado-x svg { width: 22px; height: 22px; }

.tk2-grupo { padding: 16px 18px; }
.tk2-grupo + .tk2-grupo { border-top: 1px solid #EFEFF0; }
.tk2-grupo h3 { margin: 0 0 10px; font-size: 14.5px; font-weight: 800; }

/* 44px de altura: o publico usa o site no celular, muitas vezes no patio */
/* LINHA COMPACTA, no modelo do Mercado Livre: texto e contagem, sem a
   caixinha desenhada. A caixinha mais o alvo de 44px davam ~970px so de
   opcoes na coluna; a linha de 30px corta isso pela metade, que era o
   problema de altura.

   O `<input type=checkbox>` CONTINUA no HTML, so que fora de vista: e
   ele que guarda o estado, que o teclado alcanca e que o JS le. Esconder
   com `display:none` tiraria do Tab — por isso ele sai da tela por
   posicionamento, e o anel de foco vai na linha inteira.

   No celular a regra se inverte: la o dedo precisa dos 44px e da
   caixinha visivel (ver a media query da gaveta). */
.tk2-opcao {
  position: relative;
  display: flex; align-items: baseline; gap: 10px;
  padding: 6px 0; min-height: 30px; box-sizing: border-box;
  font-size: 14.5px; color: #2E2D2F; cursor: pointer;
}
.tk2-opcao input {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; margin: 0; pointer-events: none;
}
.tk2-opcao span { flex: 1; min-width: 0; }
.tk2-opcao em { font-style: normal; font-size: 13px; color: #8C8C8A; }
.tk2-opcao:hover span { text-decoration: underline; }
.tk2-opcao:has(input:focus-visible) { outline: 2px solid #FCAF17; outline-offset: 2px; }

/* marcada: grafite, negrito e um tique na frente — tres sinais, nao so
   a cor, que esbarraria na WCAG 1.4.1 */
.tk2-opcao:has(input:checked) { font-weight: 800; }
.tk2-opcao:has(input:checked) span::before {
  content: '';
  display: inline-block; width: 13px; height: 9px; margin-right: 8px;
  border-left: 2.5px solid #2E2D2F; border-bottom: 2.5px solid #2E2D2F;
  transform: rotate(-45deg) translate(2px, -2px);
}
.tk2-opcao:has(input:checked) em { color: #2E2D2F; font-weight: 700; }
/* `display: flex` na classe vence o `[hidden]` do navegador */
.tk2-opcao[hidden] { display: none; }

/* opcao que daria zero no filtro atual: apagada e sem clique. Mostrar
   "Scania 7" dentro de uma busca por caçamba, onde Scania tem zero, e
   prometer resultado e entregar tela vazia. */
.tk2-opcao[data-zero] { opacity: .38; cursor: default; }
.tk2-opcao[data-zero] input { cursor: default; }

.tk2-ver-todas {
  margin-top: 4px;
  display: block; width: 100%;
  background: none; border: 0; border-top: 1px solid #EDEDEE;
  padding: 12px 0 4px; min-height: 44px;
  font-family: 'Cairo', sans-serif; font-size: 13.5px; font-weight: 700;
  color: #8A5D00; text-align: left; cursor: pointer;
}
.tk2-ver-todas:hover { color: #2E2D2F; }

/* Os dois booleanos viram CHAVE em cartao, no modelo do Mercado Livre:
   sao binarios e sao os de maior valor da coluna, entao nao disputam
   espaco com as listas — cada um no seu cartao, com a explicacao
   embaixo do titulo. */
.tk2-opcao--bom {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 4px 14px;
  border: 1px solid #CDE4D5; background: #fff;
  padding: 13px 14px; min-height: 56px;
  font-weight: 800; color: #0B5C2D;
}
.tk2-opcao--bom + .tk2-opcao--bom { margin-top: 10px; }
.tk2-opcao--bom span { font-size: 15px; }
.tk2-opcao--bom span::before { content: none !important; }
.tk2-opcao--bom i {
  grid-column: 1; font-style: normal;
  font-size: 12.5px; font-weight: 600; color: #4A6B57;
}
.tk2-opcao--bom em {
  grid-row: 1 / span 2; grid-column: 2;
  font-size: 13px; font-weight: 800; color: #0B5C2D;
}
.tk2-opcao--bom:hover { border-color: #0F7B3C; }
.tk2-opcao--bom:hover span { text-decoration: none; }

/* a chave: desenhada no ::after do rotulo, comandada pelo checkbox */
.tk2-opcao--bom::after {
  content: '';
  grid-row: 1 / span 2; grid-column: 3;
  width: 42px; height: 24px; border-radius: 999px;
  background: #DCDCDD;
  box-shadow: inset 0 0 0 2px #DCDCDD;
  transition: background .2s ease;
  position: relative;
}
.tk2-opcao--bom { grid-template-columns: 1fr auto auto; }
.tk2-opcao--bom::before {
  content: '';
  grid-row: 1 / span 2; grid-column: 3;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3);
  margin-left: 3px; z-index: 1;
  transition: margin-left .2s ease;
}
.tk2-opcao--bom:has(input:checked)::after { background: #0F7B3C; box-shadow: inset 0 0 0 2px #0F7B3C; }
.tk2-opcao--bom:has(input:checked)::before { margin-left: 21px; }
.tk2-opcao--bom:has(input:checked) { border-color: #0F7B3C; background: #F3FAF5; }

.tk2-campo {
  width: 100%; box-sizing: border-box;
  border: 1px solid #DCDCDD; background: #fff;
  padding: 12px 11px;
  font-family: 'Cairo', sans-serif; font-size: 14.5px; font-weight: 700; color: #2E2D2F;
  min-height: 44px;
}
select.tk2-campo { cursor: pointer; }

.tk2-chips-grupo { display: flex; flex-wrap: wrap; gap: 8px; }
.tk2-chips-grupo .tk2-opcao {
  border: 1.5px solid #DCDCDD; padding: 9px 14px; font-weight: 700;
}
.tk2-chips-grupo .tk2-opcao input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tk2-chips-grupo .tk2-opcao:has(input:checked) { border-color: #FCAF17; background: #FFF8E8; }

/* ---- barra do resultado ---- */
.tk2-barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding-bottom: 16px;
}
.tk2-conta { margin: 0; font-size: 15px; color: #6B6B6D; }
.tk2-conta b { font-size: 21px; font-weight: 900; color: #2E2D2F; }
.tk2-barra-dir { display: flex; align-items: center; gap: 12px; }
.tk2-barra-dir .tk2-campo { width: auto; border-width: 1.5px; }
/* no celular o filtro mora numa gaveta; o botao fica tambem aqui, no topo
   da lista, que e onde se procura por ele (a barra do pe e o reforco) */
.tk2-filtrar-topo { display: none; }
@media (max-width: 1000px) {
  .tk2-barra-dir { width: 100%; }
  .tk2-filtrar-topo {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 48px; padding: 0 16px;
    background: #2E2D2F; color: #fff; border: none; cursor: pointer;
    font-family: 'Cairo', sans-serif; font-size: 16px; font-weight: 800;
  }
  .tk2-filtrar-topo svg { width: 18px; height: 18px; }
  .tk2-barra-dir .tk2-campo { flex: 1; min-width: 0; height: 48px; min-height: 48px; padding-top: 0; padding-bottom: 0; }
}

.tk2-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 16px; }
.tk2-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: #FFF8E8; border: 1px solid #FCAF17;
  padding: 8px 12px; min-height: 40px;
  font-family: 'Cairo', sans-serif; font-size: 13.5px; font-weight: 700; color: #414042;
  cursor: pointer;
}
.tk2-chip i { font-style: normal; font-size: 16px; line-height: 1; color: #8A5D00; }
.tk2-chip:hover { background: #FCAF17; }

/* ---- cards ---- */
.tk2-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

.tk2-card {
  background: #fff; border: 1px solid #E3E3E4;
  display: flex; flex-direction: column;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.tk2-card:hover { border-color: #CFCFD0; box-shadow: 0 10px 30px rgba(46,45,47,.1); }

.tk2-card-foto {
  position: relative; display: block;
  aspect-ratio: 4 / 3; overflow: hidden; background: #EDEDEE;
}
.tk2-card-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.tk2-card:hover .tk2-card-foto img { transform: scale(1.04); }

/* sem foto: a silhueta da carroceria em vez de imagem quebrada ou de
   uma foto generica que ilustraria o anuncio errado. Fundo grafite para
   ler como desenho tecnico, e nao como foto que nao carregou. */
.tk2-card-foto--sem { background: var(--tk2-grafite, #2E2D2F); }
/* a silhueta fica no fundo e a foto por cima; se a foto nao carregar,
   o `onerror` a remove e o desenho aparece */
.tk2-card-foto--sem img { position: absolute; inset: 0; z-index: 1; }
.tk2-card-sem {
  display: grid; place-content: center; justify-items: center; gap: 12px;
  width: 100%; height: 100%;
  color: rgba(255,255,255,.72);
}
/* O rotulo so aparece quando a foto REALMENTE nao existe (o `onerror`
   marcou o pai). Enquanto a foto lazy nao pinta, a silhueta ja esta la
   atras — mas dizer "foto sob consulta" por cima de uma foto que vai
   carregar em meio segundo e mentira piscando. */
.tk2-card-sem i { display: none; }
.tk2-card-foto--vazio .tk2-card-sem i,
.tk2-card-foto:not(:has(img)) .tk2-card-sem i {
  display: block;
  font-style: normal; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.tk2-preco--consulta { font-size: 19px !important; letter-spacing: -.01em; }

/* o selo vai sobre a foto: e o primeiro elemento que o olho encontra */
.tk2-fipe {
  position: absolute; left: 0; top: 14px;
  display: flex; align-items: center; gap: 7px;
  background: #0F7B3C; color: #fff;
  padding: 7px 13px 7px 11px;
  font-size: 13px; font-weight: 800;
}
.tk2-fipe svg { width: 15px; height: 15px; }

.tk2-card-corpo { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.tk2-card-nome { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.2; }
.tk2-card-nome a { color: #2E2D2F; }
.tk2-card-nome a:hover { color: #8A5D00; }
.tk2-card-versao { margin: 5px 0 0; font-size: 13.5px; color: #6B6B6D; }

/* ano e KM no mesmo peso: e a segunda pergunta de quem compra */
.tk2-dados { display: flex; gap: 10px; margin-top: 14px; }
.tk2-dado { flex: 1; min-width: 0; border: 1px solid #E3E3E4; padding: 9px 11px; }
.tk2-dado span {
  display: block; font-size: 11.5px; font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase; color: #6B6B6D;
}
.tk2-dado b { display: block; font-size: 19px; font-weight: 900; line-height: 1.2; color: #2E2D2F; }
/* cor E rotulo mudam juntos: quem nao distingue cor continua lendo */
.tk2-dado--bom { border-color: #0F7B3C; background: #EAF5EE; }
.tk2-dado--bom span, .tk2-dado--bom b { color: #0B5C2D; }
/* a media por ano e o argumento: 220 mil num 2021 sao 44 mil por ano */
.tk2-dado i { display: block; margin-top: 2px; font-style: normal; font-size: 12px; font-weight: 700; color: #17694A; }

.tk2-preco { margin-top: auto; padding-top: 16px; }
.tk2-ref { display: block; font-size: 13px; color: #6B6B6D; }
.tk2-preco strong {
  display: block; font-size: 27px; font-weight: 900;
  line-height: 1.1; letter-spacing: -.02em; color: #2E2D2F;
}
.tk2-parcela { display: block; margin-top: 3px; font-size: 13.5px; color: #6B6B6D; }

.tk2-card-cta {
  margin-top: 15px; display: block; text-align: center;
  background: #FCAF17; color: #2E2D2F;
  padding: 14px;
  font-size: 14.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px;
  min-height: 44px; box-sizing: border-box;
}
.tk2-card-cta:hover { background: #e69e0d; color: #2E2D2F; }

.tk2-vazio { padding: 48px 0; text-align: center; font-size: 17px; color: #6B6B6D; }
.tk2-vazio button {
  background: none; border: none; padding: 0 0 0 6px;
  font-family: 'Cairo', sans-serif; font-size: 17px; font-weight: 800;
  color: #8A5D00; text-decoration: underline; cursor: pointer;
}

.tk2-mais-fora { display: flex; justify-content: center; padding-top: 32px; }
.tk2-mais {
  border: 2px solid #2E2D2F; background: #fff; color: #2E2D2F;
  padding: 16px 44px;
  font-family: 'Cairo', sans-serif; font-size: 15px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .8px; cursor: pointer; min-height: 44px;
}
.tk2-mais:hover { background: #2E2D2F; color: #fff; }

/* ============================================================
   DESCOBRIR — para quem nao sabe o modelo
   ============================================================ */
.tk2-descobrir { background: #2E2D2F; color: #fff; }
.tk2-descobrir .tk2-dentro { padding-top: 46px; padding-bottom: 46px; }
.tk2-descobrir-h2 { margin: 0 0 8px; font-size: clamp(26px, 2.4vw, 34px); font-weight: 900; line-height: 1.12; }
.tk2-descobrir-p { margin: 0 0 24px; font-size: 16.5px; line-height: 1.5; color: #D2D2D3; max-width: 72ch; }

.tk2-usos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.tk2-uso {
  display: block; border: 1.5px solid #4A494B; background: #38373A;
  padding: 18px 16px; min-height: 44px; box-sizing: border-box;
  transition: border-color .15s ease, background .15s ease;
}
.tk2-uso:hover { border-color: #FCAF17; background: #423F44; color: #fff; }
.tk2-uso b { display: block; font-size: 16px; font-weight: 800; line-height: 1.25; color: #fff; }
.tk2-uso span { display: block; margin-top: 5px; font-size: 13.5px; line-height: 1.4; color: #B9B9BB; }

.tk2-descobrir-pe {
  display: flex; align-items: center; justify-content: space-between;
  gap: 26px; flex-wrap: wrap;
  margin-top: 28px; padding-top: 24px; border-top: 1px solid #4A494B;
}
.tk2-descobrir-pe p { margin: 0; font-size: 15.5px; line-height: 1.5; color: #D2D2D3; max-width: 62ch; }
.tk2-descobrir-pe b { color: #fff; }
.tk2-zap-btn {
  flex: none; display: inline-flex; align-items: center; gap: 11px;
  background: #0F7B3C; color: #fff;
  padding: 16px 28px; font-size: 15.5px; font-weight: 800;
  min-height: 44px; box-sizing: border-box;
}
.tk2-zap-btn:hover { background: #0B5C2D; color: #fff; }
.tk2-zap-btn svg { width: 20px; height: 20px; }

/* ============================================================
   BARRA DO RODAPE (celular)
   ============================================================ */
.tk2-veu { position: fixed; inset: 0; z-index: 44; background: rgba(46,45,47,.5); }
.tk2-pe { display: none; }

/* ============================================================
   TELAS MENORES (x .9 por causa do zoom do body)
   ============================================================ */
@media (max-width: 1240px) {
  .tk2-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk2-atalhos-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk2-usos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
  .tk2-dentro { padding: 0 20px; }
  .tk2-grade { grid-template-columns: minmax(0, 1fr); padding-bottom: 96px; }

  /* A gaveta ocupa a TELA INTEIRA, nao uma faixa de 320px. Numa tela de
     375 sobravam 55px de catalogo atras dela: nem escondia nem servia,
     e o dedo no vao fechava sem querer. Tela cheia e o que ML e OLX
     fazem, e e o que deixa o rotulo de cada opcao respirar. */
  .tk2-lado {
    position: fixed; inset: 0; z-index: 45;
    width: 100%; max-width: none;
    display: flex; flex-direction: column;
    overflow: hidden;
    transform: translateX(-100%); transition: transform .25s ease;
  }
  body.tk2-filtros-abertos .tk2-lado { transform: none; }
  /* so o miolo rola; topo e rodape ficam parados */
  .tk2-lado > .tk2-grupo { flex: none; }
  .tk2-lado-rolo { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
  .tk2-lado-topo { flex: none; }

  /* "Aplicar" com a contagem: sem ele a pessoa marca o filtro e fica
     olhando a gaveta, sem saber que ja filtrou atras dela */
  .tk2-lado-aplicar {
    flex: none; display: block; width: 100%;
    padding: 17px 20px calc(17px + env(safe-area-inset-bottom));
    background: #FCAF17; border: 0;
    font-family: 'Cairo', sans-serif; font-size: 16px; font-weight: 800;
    color: #2E2D2F; cursor: pointer;
  }
  .tk2-lado-x { display: block; }

  /* Na gaveta o dedo manda: caixinha visivel e alvo de 44px. A linha
     compacta do desktop e para mouse. */
  .tk2-opcao { min-height: 44px; padding: 8px 0; align-items: center; }
  .tk2-opcao input {
    position: static; width: 20px; height: 20px;
    opacity: 1; accent-color: #FCAF17; pointer-events: auto; flex: none;
  }
  .tk2-opcao:has(input:checked) span::before { content: none; }
  .tk2-opcao:hover span { text-decoration: none; }
  .tk2-opcao--bom input { accent-color: #0F7B3C; }
  .tk2-opcao--bom::before, .tk2-opcao--bom::after { content: none; }
  .tk2-opcao--bom { grid-template-columns: auto 1fr auto; }
  /* sem posicao explicita, o em (grid-column: 2 do desktop) tomava a
     coluna do texto: o numero vinha antes e o texto ia para a direita */
  .tk2-opcao--bom input { grid-column: 1; grid-row: 1; }
  .tk2-opcao--bom span { grid-column: 2; grid-row: 1; }
  .tk2-opcao--bom em { grid-column: 3; grid-row: 1; }

  /* o chat do Leadster (z 32767) ficava por cima da gaveta, tapando a
     lista de marcas; some enquanto ela estiver aberta */
  body.tk2-filtros-abertos .nld-avatar,
  body.tk2-filtros-abertos .nld-conversation,
  body.tk2-filtros-abertos .nld-backdrop { display: none !important; }

  /* o filtro fica sempre a mao: escondido num menu, a pessoa desiste */
  .tk2-pe {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 43;
    display: flex; gap: 10px;
    background: #fff; border-top: 1px solid #DCDCDD;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 24px rgba(46,45,47,.12);
  }
  .tk2-pe-filtrar {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 9px;
    background: #2E2D2F; border: none; color: #fff;
    padding: 16px;
    font-family: 'Cairo', sans-serif; font-size: 15px; font-weight: 800;
    cursor: pointer; min-height: 44px;
  }
  .tk2-pe-filtrar svg { width: 18px; height: 18px; }
  .tk2-pe-n { background: #FCAF17; color: #2E2D2F; padding: 2px 9px; font-size: 12.5px; font-weight: 800; }
  .tk2-pe-zap {
    flex: none; display: flex; align-items: center; justify-content: center;
    background: #0F7B3C; color: #fff; padding: 16px 22px; min-height: 44px; box-sizing: border-box;
  }
  .tk2-pe-zap svg { width: 20px; height: 20px; }

  .tk2-capa-dentro { padding-top: 30px; padding-bottom: 30px; }
  .tk2-busca button span { display: none; }
  .tk2-busca button { padding: 0 20px; }
}

@media (max-width: 720px) {
  .tk2-lista { grid-template-columns: minmax(0, 1fr); }
  /* dois por linha: empilhados um por linha eram 401px so de atalho
     antes do primeiro caminhao aparecer */
  .tk2-atalhos-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tk2-atalho { min-height: 60px; padding: 10px 12px; column-gap: 9px; }
  .tk2-atalho-i svg { width: 20px; height: 20px; }
  .tk2-atalho-t { font-size: 16.5px; }
  .tk2-atalho-n { font-size: 14px; }
  .tk2-usos { grid-template-columns: minmax(0, 1fr); }
  .tk2-capa-h1 { font-size: 28px; }
  .tk2-barra { gap: 10px; }
  .tk2-descobrir-pe { gap: 16px; }
  .tk2-zap-btn { width: 100%; justify-content: center; }
}

/* ============================================================
   MARCAS, TAG DO CARD, FAVORITOS E O BLOCO INSTITUCIONAL
   ============================================================ */

/* ---- chips de marca, antes do catalogo ---- */
.tk2-marcas-chips { background: #fff; border-bottom: 1px solid #E3E3E4; }
.tk2-marcas-chips .tk2-dentro { padding-top: 20px; padding-bottom: 20px; }
.tk2-marcas-chips .tk2-rotulo { margin-bottom: 11px; }
.tk2-marcas-fila { display: flex; flex-wrap: wrap; gap: 10px; }
.tk2-marca-chip {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1.5px solid #DCDCDD; background: #fff;
  padding: 11px 18px; min-height: 44px;
  font-family: 'Cairo', sans-serif; font-size: 15.5px; font-weight: 800; color: #2E2D2F;
  cursor: pointer;
}
.tk2-marca-chip em {
  font-style: normal; font-size: 13px; font-weight: 700; color: #6B6B6D;
  background: #F2F2F3; padding: 2px 8px;
}
/* `display: inline-flex` na classe vence o `[hidden] {display:none}` do
   navegador. Vale para qualquer chip que o JS esconda. */
.tk2-marca-chip[hidden] { display: none; }
.tk2-marca-chip:hover { border-color: #2E2D2F; }

/* dois grupos: caminhao de um lado, maquina e implemento do outro.
   Quem procura um cavalo mecanico nao procura Caterpillar, e misturadas
   na mesma fileira as duas listas se atrapalhavam. */
/* os dois grupos LADO A LADO: empilhados, "Por marca" gastava cinco
   linhas (rotulo da secao, rotulo do grupo, fileira, rotulo, fileira)
   para seis botoes. A divisoria substitui a distancia vertical. */
.tk2-marcas-caixa {
  display: flex; flex-wrap: wrap;
  gap: 16px 36px; align-items: flex-start;
}
/* A divisoria so EXISTE quando ha largura para os dois grupos lado a
   lado. Antes ela existia sempre e uma regra no celular tentava tira-la
   — mas essa regra ficava ANTES desta no arquivo, com a mesma
   especificidade, e perdia: em toda largura em que os grupos quebravam
   de linha, "Maquinas e implementos" aparecia recuado com a barra solta.
   Com `min-width` a ordem no arquivo deixa de importar. */
@media (min-width: 1153px) {
  .tk2-marcas-grupo + .tk2-marcas-grupo {
    padding-left: 36px;
    border-left: 1px solid #E3E3E4;
  }
}
.tk2-marcas-rot {
  margin: 0 0 9px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #6B6B6D;
}

.tk2-marca-chip[aria-pressed="true"] { border-color: #FCAF17; background: #FFF8E8; }
.tk2-marca-chip[aria-pressed="true"] em { background: #FCAF17; color: #2E2D2F; }

/* ---- a tag do card ----
   Uma so, no corpo. Sobre a foto ja mora o selo da FIPE, e duas tarjas na
   mesma imagem voltam ao problema da v1. Cinza-escuro de proposito: a tag e
   contexto, nao vantagem medida — o verde continua reservado ao que o
   comprador consegue conferir sozinho. */
.tk2-tag {
  display: inline-block; margin-top: 10px;
  border: 1px solid #D4D4D5; background: #F7F7F8;
  padding: 4px 10px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .3px; color: #4A494B;
}
/* repasse e o unico argumento de preco que sobrou como tag: ganha contorno */
.tk2-tag[data-tag="repasse"] { border-color: #B8860B; background: #FFF8E8; color: #6B4E00; }

/* ---- favoritar ----
   Quem compara 3 ou 4 caminhoes por dias precisa de onde guardar. Fica no
   canto da foto, discreto: nao disputa com o botao, que e a acao principal. */
.tk2-card { position: relative; }
.tk2-fav {
  position: absolute; right: 10px; top: 10px; z-index: 2;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: rgba(255,255,255,.92); color: #6B6B6D;
  cursor: pointer;
}
.tk2-fav svg { width: 19px; height: 19px; }
.tk2-fav:hover { background: #fff; color: #2E2D2F; }
.tk2-fav[aria-pressed="true"] { color: #B8860B; }
.tk2-fav[aria-pressed="true"] svg { fill: #FCAF17; stroke: #B8860B; }

/* a lista so aparece quando existe: uma barra vazia e ruido */
.tk2-fav-barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 42;
  background: #2E2D2F; color: #fff;
}
.tk2-fav-barra[hidden] { display: none; }
.tk2-fav-barra .tk2-dentro {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; padding-top: 13px; padding-bottom: 13px;
}
.tk2-fav-barra p { margin: 0; font-size: 15px; }
.tk2-fav-barra b { font-size: 19px; font-weight: 900; }
.tk2-fav-acoes { display: flex; align-items: center; gap: 10px; }
.tk2-fav-limpar {
  background: none; border: none; padding: 8px 4px;
  font-family: 'Cairo', sans-serif; font-size: 14px; font-weight: 700;
  color: #C7C7C9; text-decoration: underline; cursor: pointer; min-height: 44px;
}
.tk2-fav-limpar:hover { color: #fff; }
.tk2-fav-zap {
  display: inline-flex; align-items: center; gap: 10px;
  background: #0F7B3C; color: #fff;
  padding: 13px 22px; font-size: 15px; font-weight: 800;
  min-height: 44px; box-sizing: border-box;
}
.tk2-fav-zap:hover { background: #0B5C2D; color: #fff; }
.tk2-fav-zap svg { width: 19px; height: 19px; }

/* ---- bloco institucional, depois do catalogo ---- */
/* respiro: encostado no bloco escuro de cima e no rodape, parecia
   que os dois eram o mesmo bloco */
.tk2-inst { background: #fff; border-top: 1px solid #E3E3E4; padding: 46px 0 52px; }
.tk2-inst > section { padding-top: 0 !important; padding-bottom: 0 !important; }
.tk2-inst > section + section { margin-top: 52px; }

@media (max-width: 1000px) {
  /* com a barra do rodape ja ocupando o pe, a de favoritos sobe para cima dela */
  .tk2-fav-barra { bottom: 77px; }
  .tk2-fav-barra .tk2-dentro { padding-top: 10px; padding-bottom: 10px; gap: 10px; }
  .tk2-fav-barra p { font-size: 14px; }
  .tk2-fav-zap { padding: 11px 16px; font-size: 14px; }
  .tk2-fav-limpar { display: none; }
}

/* ---- cartoes de uso, com a silhueta ----
   A forma da carroceria e o numero de rodas dizem o que e o caminhao antes
   de qualquer palavra. E o mesmo desenho da vitrine, entao a pessoa ja
   aprendeu a ler ele em outro lugar da pagina. */
.tk2-uso {
  display: flex; flex-direction: column;
  padding: 22px 18px 20px;
}
/* .tk2-uso span tem especificidade maior que .tk2-uso-fig e pintava a
   silhueta de cinza; por isso a regra vem qualificada pelo pai */
.tk2-uso .tk2-uso-fig {
  display: block; margin-bottom: 16px; color: #FCAF17;
  transition: transform .25s ease, color .2s ease;
}
.tk2-uso-fig svg { display: block; }
.tk2-uso:hover .tk2-uso-fig { transform: translateX(7px); color: #fff; }
.tk2-uso-sub { flex: 1; }
.tk2-uso i {
  display: block; margin-top: 12px; font-style: normal;
  font-size: 13px; font-weight: 800; color: #FCAF17;
}
.tk2-descobrir .tk2-usos { margin-top: 6px; }
.tk2-descobrir-pe { margin-top: 32px; }

@media (max-width: 720px) {
  .tk2-capa-dentro { padding-top: 40px; padding-bottom: 40px; }
  .tk2-inst { padding: 34px 0 38px; }
  .tk2-inst > section + section { margin-top: 38px; }
}

/* ---- busca por voz ----
   Esse comprador usa o site no patio, no celular, muitas vezes de luva.
   Falar "cacamba 6x4 ate 400 mil" e mais rapido do que digitar. */
/* qualificado pelo pai: .tk2-busca button (o Buscar) e mais especifico
   que .tk2-voz e pintava o microfone de grafite */
.tk2-busca .tk2-voz {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-right: 6px; padding: 0;
  border: none; background: none; color: #6B6B6D;
  cursor: pointer;
}
.tk2-busca .tk2-voz:hover { color: #2E2D2F; background: #F2F2F3; }
.tk2-busca .tk2-voz svg { width: 21px; height: 21px; }
.tk2-busca .tk2-voz[hidden] { display: none; }
.tk2-busca .tk2-voz.is-ouvindo { color: #B82B29; background: #FDECEC; }

/* ouvindo: o circulo pulsa e o rotulo muda — cor nao e o unico sinal */

.tk2-busca .tk2-voz.is-ouvindo svg { animation: tk2-pulso 1.1s ease-in-out infinite; }
@keyframes tk2-pulso {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .55; transform: scale(1.14); }
}

.tk2-voz-eco {
  margin: 12px 0 0; max-width: 780px;
  font-size: 15px; color: #fff;
}
.tk2-voz-eco[hidden] { display: none; }
.tk2-voz-eco b { color: #FCAF17; }

@media (max-width: 720px) {
  .tk2-busca .tk2-voz { width: 42px; height: 42px; margin-right: 3px; }
  .tk2-busca input { padding-left: 14px; font-size: 16px; }
}

/* ---- video do banner ----
   Mesmo enquadramento da foto, por cima dela. Entra com fade para a troca
   nao piscar, e some junto se der qualquer problema. */
.tk2-capa-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 62% center;
  opacity: 0;
  transition: opacity .8s ease;
  pointer-events: none;
}
.tk2-capa-video.is-vendo { opacity: 1; }

/* Faixa de preco: "de" e "ate" lado a lado. Era so um teto ("Preco
   ate"), e quem procura caminhao tem piso tambem — abaixo de um certo
   valor, naquele porte, nao existe o que ele quer. E o padrao de
   qualquer marketplace do ramo. */
.tk2-faixa { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tk2-faixa span { display: block; }
.tk2-faixa label {
  display: block; margin-bottom: 5px;
  font-size: 12px; font-weight: 700; color: #6B6B6D;
}

/* Logos de marca do bloco institucional. Eram sete fixos numa grade de
   sete colunas, com setas de carrossel que nao faziam nada; Ford e DAF
   tinham ZERO veiculos e levavam a "nenhum resultado". Agora a grade se
   ajusta ao numero de marcas que sobram, e o v2.js tira as vazias. */
.tk-marcas-logos {
  flex: 1;
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.tk-marca-item em {
  display: block; margin-top: 4px;
  font-style: normal; font-size: 12.5px; color: #6B6B6D; text-align: center;
}
@media (max-width: 648px) {
  .tk-marcas-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}

/* O avatar do Leadster (terceiro, fixo em bottom:48px) caia em cima do
   botao "Filtrar" da barra do pe no celular. Sobe para cima da barra —
   o balao de convite e filho dele e sobe junto. */
@media (max-width: 1000px) {
  body:has(.tk2-pe) .nld-avatar { bottom: 104px !important; }
}
.tk2-atalho[hidden] { display: none; }