/* Trucket — home do marketplace.
   Estilos globais + keyframes. O resto do visual vem dos style inline
   do handoff do Claude Design (fidelidade alta, mexer bloco a bloco). */

/* com o header fixo, o scroll até uma seção precisa parar antes dele */
html { scroll-padding-top: 92px; }
section, .tk-busca-fora { scroll-margin-top: 92px; }

/* O Rafael prefere o site como ele fica com o Chrome em 90%: mais
   conteúdo na tela e elementos proporcionalmente menores. `zoom` no body
   reproduz exatamente isso sem mexer em centenas de medidas. */
body { zoom: .9; }

/* No CELULAR o zoom volta a 1. Os 90% foram escolha para desktop (mais
   conteudo na tela); no telefone eles so encolhiam letra e alvo de dedo
   — um `min-height: 40px` saia com 36. Media query le a janela real com
   ou sem zoom, entao quais regras valem nao muda: so a escala. */
@media (max-width: 648px) {
  body { zoom: 1; }
}
/* Como a media query lê a janela real e o conteúdo enxerga 1/0.9 dela,
   todos os breakpoints abaixo já vêm multiplicados por .9. Ao criar um
   novo, aplique a mesma conta: largura desejada x 0.9. */

html, body {
  margin: 0;
  padding: 0;
  background: #fff;
  font-family: 'Cairo', sans-serif;
  color: #414042;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }

a { color: #414042; text-decoration: none; }
a:hover { color: #FCAF17; }

img { max-width: 100%; }

::selection { background: #FCAF17; color: #414042; }

/* ---- animações da busca do hero ---- */
@keyframes tk-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(252,175,23,0), 0 14px 44px rgba(252,175,23,.28); }
  50%      { box-shadow: 0 0 0 4px rgba(252,175,23,.10), 0 18px 60px rgba(252,175,23,.45); }
}
/* sobre o veu escuro do hero o minimo precisa ser mais alto que o original */
@keyframes tk-pulse {
  0%, 100% { opacity: .7; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.06); }
}
/* onda sonora: 5 barras amarelas com alturas alternadas */
@keyframes tk-wave {
  0%, 100% { transform: scaleY(.35); }
  50%      { transform: scaleY(1); }
}
[data-hero] .tk-wave span,
[data-hero] span[style*="tk-wave"] { transform-origin: bottom center; }

/* ---- menu do header ---- */
.tk-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  flex: 1;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
}
.tk-nav > a, .tk-nav-botao { white-space: nowrap; }

.tk-nav-drop { position: relative; }
.tk-nav-botao {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  font-family: 'Cairo', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #414042;
  cursor: pointer;
}
.tk-nav-botao:hover { color: #FCAF17; }
.tk-nav-seta { font-size: 10px; color: #636362; transition: transform .2s ease; }
.tk-nav-drop:hover .tk-nav-seta,
.tk-nav-botao[aria-expanded="true"] .tk-nav-seta { transform: rotate(180deg); }

.tk-nav-lista {
  position: absolute;
  left: 50%;
  top: calc(100% + 14px);
  transform: translateX(-50%);
  min-width: 214px;
  background: #fff;
  border: 1px solid #E6E6E6;
  box-shadow: 0 16px 40px rgba(46, 45, 47, .16);
  padding: 6px 0;
  display: flex;
  flex-direction: column;
  /* fecha sem sumir do fluxo, para o hover não piscar na travessia */
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility 0s linear .18s;
  z-index: 40;
}
/* o vão entre o botão e a lista mataria o hover; esta ponte cobre ele */
.tk-nav-drop::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 16px;
}
.tk-nav-drop:hover .tk-nav-lista,
.tk-nav-drop:focus-within .tk-nav-lista {
  opacity: 1;
  visibility: visible;
  transition: opacity .18s ease, visibility 0s;
}
.tk-nav-lista a {
  padding: 9px 20px;
  font-size: 14.5px;
  font-weight: 600;
  color: #414042;
}
.tk-nav-lista a:hover { background: #F7F7F8; color: #414042; box-shadow: inset 3px 0 0 #FCAF17; }

@media (max-width: 1062px) {
  .tk-nav { gap: 18px; font-size: 15px; }
  .tk-nav-botao { font-size: 15px; }
}

/* ============================================================
   HERO — a arte do banner e uma imagem so; o texto mora por cima
   ============================================================ */

/* A imagem entra INTEIRA, sem `cover` e sem corte: a diagonal branca, o
   "K" e o caminhao ja vem compostos nela. A altura do hero e a da propria
   arte, entao mexer na proporcao do arquivo muda a altura da secao. */
.tk-hero { position: relative; background: #fff; overflow: hidden; }
.tk-hero-banner { display: block; width: 100%; height: auto; }

/* O texto ocupa a area clara da esquerda da arte. E `absolute` para nao
   empurrar a imagem: o hero mede pela imagem, nunca pelo texto. */
.tk-hero-dentro {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* nada de container centralizado de 1560px aqui: a diagonal da arte e
     uma porcentagem da largura, entao o texto tambem precisa ser. Num
     container fixo, telas largas empurravam os botoes para cima da foto. */
  padding: 0 5%;
  display: flex;
  align-items: center;
}
/* a diagonal da arte corre para a esquerda conforme desce: quanto mais
   embaixo o texto, menos largura sobra. A margem inferior sobe o bloco
   inteiro o suficiente para os dois CTAs caberem lado a lado sem cruzar
   a aresta. */
.tk-hero-texto { max-width: 36%; margin-bottom: 8%; }

.tk-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: clamp(11px, 1vw, 17px);
  font-weight: 800;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: #414042;
  white-space: nowrap;
}
.tk-hero-kicker i { width: 46px; height: 3px; background: #FCAF17; flex: none; }

/* tudo no hero e medido em vw: o texto acompanha a arte quando ela escala */
.tk-hero-h1 {
  margin: .18em 0 0;
  font-size: clamp(40px, 5.5vw, 148px);
  font-weight: 900;
  line-height: .94;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: #2E2D2F;
}
.tk-hero-h1 em { font-style: normal; color: #FCAF17; }

.tk-hero-p {
  margin: 1.1em 0 0;
  font-size: clamp(15px, 1.34vw, 23px);
  font-weight: 500;
  line-height: 1.45;
  color: #3A3A3C;
}

.tk-hero-ctas { display: flex; flex-wrap: wrap; gap: .7em; margin-top: 1.7em; }
.tk-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #FCAF17;
  color: #414042;
  font-size: clamp(12px, 1.08vw, 18px);
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 1.15em 1.55em;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.tk-hero-cta:hover { background: #e69e0d; color: #414042; }
.tk-hero-cta--vazado {
  background: rgba(255, 255, 255, .72);
  border: 1.5px solid #C9C9CA;
  color: #414042;
}
.tk-hero-cta--vazado:hover { background: #2E2D2F; border-color: #2E2D2F; color: #fff; }


/* ---- movimento do hero ----
   Tres coisas, todas discretas: o texto entra em cascata no load, um
   brilho cruza a lataria de tempos em tempos e o bloco de texto sobe e
   desvanece quando a pagina rola. Nada disso corta a arte. */

/* entrada em cascata: o delay vem do JS, um item por vez */
.tk-hero-texto.tk-anima > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
              transform .7s cubic-bezier(.22, .61, .36, 1);
}
.tk-hero-texto.tk-anima > .is-visivel { opacity: 1; transform: none; }

/* o brilho e uma faixa inclinada no mesmo angulo da diagonal da arte.
   `soft-light` clareia a lataria sem lavar o ceu. Comeca depois de 28%
   da largura: assim nunca passa por cima do texto. */
.tk-hero-luz {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 28%;
  right: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.tk-hero-luz::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 34%;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .5) 50%,
    rgba(255, 255, 255, 0) 100%);
  transform: skewX(-33deg);
  mix-blend-mode: soft-light;
  animation: tk-brilho-hero 14s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes tk-brilho-hero {
  0%   { transform: skewX(-33deg) translateX(0); }
  /* a travessia ocupa pouco mais de um terco do ciclo; o resto e pausa */
  38%  { transform: skewX(-33deg) translateX(400%); }
  100% { transform: skewX(-33deg) translateX(400%); }
}

/* fora da tela o brilho para: nao ha razao para animar o que nao se ve */
.tk-hero:not(.tk-na-tela) .tk-hero-luz::before { animation-play-state: paused; }

/* ---- barra de garantias ---- */
/* Fica fora da <section> do hero, sobre branco: em cima da foto o texto
   cinza perdia contraste. */
.tk-hero-garantias-fora { background: #fff; }
.tk-hero-garantias {
  max-width: 1560px;
  margin: 0 auto;
  padding: 34px 40px 30px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.tk-garantia {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 26px;
  min-width: 0;
}
.tk-garantia:first-child { padding-left: 0; }
.tk-garantia + .tk-garantia { border-left: 1px solid #E6E6E6; }
.tk-garantia-i { color: #FCAF17; flex: none; display: flex; }
.tk-garantia-i svg { width: 42px; height: 42px; stroke-width: 1.5; }
.tk-garantia-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tk-garantia-txt b {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #2E2D2F;
}
.tk-garantia-txt i {
  font-style: normal;
  font-size: 14.5px;
  line-height: 1.4;
  color: #777779;
}

@media (max-width: 922px) {
  /* sem largura para a arte e o texto convivirem: o texto desce */
  .tk-hero-dentro { position: static; display: block; padding: 28px 24px 0; }
  .tk-hero-texto { max-width: none; }
  .tk-hero-h1 { font-size: 40px; }
  .tk-hero-garantias { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 0; }
  .tk-garantia:nth-child(3) { padding-left: 0; border-left: none; }
}

/* ============================================================
   PAINEL DE BUSCA — encosta logo abaixo do hero
   ============================================================ */

/* com o hero claro, o painel encosta logo abaixo em vez de subir por cima */
.tk-busca-fora {
  position: relative;
  z-index: 4;
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 40px;
}

.tk-busca {
  background: #fff;
  box-shadow: 0 18px 50px rgba(46, 45, 47, .16);
  border: 1px solid #EFEFEF;
}

.tk-busca-abas {
  display: flex;
  gap: 20px;
  padding: 0 26px;
  border-bottom: 1px solid #E6E6E6;
  flex-wrap: wrap;
}
.tk-busca-aba {
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  padding: 13px 2px 11px;
  font-family: 'Cairo', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  color: #777779;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 9px;
}
.tk-busca-aba:hover { color: #414042; }

/* A silhueta na aba é o mesmo desenho dos cards: não é ícone decorativo,
   carrega a forma da carroceria — quem aprende aqui reconhece lá embaixo.
   A cor nunca é o único sinal do estado ativo (WCAG 1.4.1): há peso,
   sublinhado e o contador junto. */
.tk-aba-sil { display: flex; color: #C9C9CA; flex: none; transition: color .2s ease; }
.tk-aba-sil svg { width: 50px; height: 18px; }
.tk-busca-aba:hover .tk-aba-sil { color: #777779; }
.tk-busca-aba.is-on .tk-aba-sil { color: #414042; }
.tk-busca-aba.is-on { color: #414042; border-bottom-color: #FCAF17; }

.tk-busca-linha {
  display: flex;
  align-items: stretch;
  padding: 18px 26px 0;
}
.tk-busca-texto {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #E6E6E6;
  padding: 0 16px;
  min-width: 0;
}
.tk-busca-texto:focus-within { border-color: #FCAF17; }
.tk-busca-lupa { width: 19px; height: 19px; color: #636362; flex: none; }
.tk-busca-texto input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: 'Cairo', sans-serif;
  font-size: 15.5px;
  font-weight: 600;
  color: #414042;
  padding: 14px 0;
  min-width: 0;
}

.tk-busca-voz {
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: 1px solid #E6E6E6;
  border-left: none;
  padding: 0 20px;
  font-family: 'Cairo', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #414042;
  cursor: pointer;
}
.tk-busca-voz svg { width: 17px; height: 17px; color: #FCAF17; }
.tk-busca-voz:hover { border-color: #FCAF17; }
/* enquanto o microfone está aberto, o botão mostra que está ouvindo */
.tk-busca-voz.is-ouvindo { border-color: #b82b29; color: #b82b29; }
.tk-busca-voz.is-ouvindo svg { color: #b82b29; }
.tk-busca-voz.is-ouvindo .tk-onda i { background: #b82b29; animation-duration: .6s; }

/* a onda sonora é a assinatura da busca falada da Trucket */
.tk-onda { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.tk-onda i {
  width: 3px;
  background: #FCAF17;
  transform-origin: bottom center;
  animation: tk-wave 1.1s ease-in-out infinite;
}
.tk-onda i:nth-child(1) { height: 6px;  animation-delay: 0s; }
.tk-onda i:nth-child(2) { height: 11px; animation-delay: .15s; }
.tk-onda i:nth-child(3) { height: 16px; animation-delay: .3s; }
.tk-onda i:nth-child(4) { height: 9px;  animation-delay: .45s; }
.tk-onda i:nth-child(5) { height: 13px; animation-delay: .6s; }

.tk-busca-campos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 12px;
  padding: 12px 26px 18px;
}
.tk-busca-campo {
  display: flex;
  flex-direction: column;
  border: 1px solid #E6E6E6;
  padding: 7px 14px 8px;
  min-width: 0;
}
.tk-busca-campo:focus-within { border-color: #FCAF17; }
.tk-busca-rotulo { font-size: 11.5px; font-weight: 600; color: #777779; }
.tk-busca-select {
  border: none;
  outline: none;
  background: transparent;
  font-family: 'Cairo', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #414042;
  cursor: pointer;
  padding: 1px 0 0;
  min-width: 0;
}
.tk-busca-select:disabled { color: #9c9c9e; cursor: not-allowed; }
/* o CTA do painel vai de grafite: num painel branco ele pesa mais que o
   amarelo, e tira o bloco de amarelo do topo da página */
.tk-busca-botao {
  background: #2E2D2F;
  border: none;
  padding: 0 44px;
  font-family: 'Cairo', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  transition: background .2s ease;
}
.tk-busca-botao:hover { background: #FCAF17; color: #414042; }

@media (max-width: 1008px) {
  .tk-busca-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-busca-botao { grid-column: 1 / -1; padding: 14px; }
}


/* ---- atalhos de um clique ----
   O briefing pede ir de "quero ver Munck" ao estoque filtrado em um toque.
   Os atalhos moram nos próprios filtros da vitrine e nas marcas; não há
   faixa separada, para não existirem dois sistemas de busca na página. */

/* marcas: viram atalho também */
.tk-marca-item { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.tk-marca-nome { font-size: 13px; color: #414042; text-align: center; }
.tk-marca-item:hover .tk-marca { border-color: #FCAF17; }
.tk-marca-item:hover .tk-marca-nome { color: #414042; }
/* sem arquivo de logo, o nome ocupa o lugar dele (ver ASSETS.md) */
.tk-marca-texto {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -.02em;
  color: #636362;
  text-align: center;
  padding: 0 6px;
}
.tk-marca-item:hover .tk-marca-texto { color: #414042; }

@media (max-width: 922px) {
  .tk-atalhos-dentro { gap: 16px; }
  .tk-atalhos-grupo { width: 100%; align-items: flex-start; }
}

/* ---- marcas em destaque ----
   Os logos vêm do WordPress em proporções muito diferentes. Numa área
   quadrada com `contain`, os quadrados (Volvo, VW) estouram e os
   horizontais (Mercedes, Ford, CAT) somem. A área retangular equilibra,
   e o cinza tira o ruído de sete paletas brigando entre si. */
.tk-marca {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #E6E6E6;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s ease;
}
.tk-marca-logo {
  width: 66px;
  height: 40px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  /* coloridos: estes logos são quase todos azul e prata, uma família só —
     não é o conflito de sete paletas que o cinza vinha resolver. Colorido
     eles são reconhecidos mais rápido e emprestam mais credibilidade. */
  opacity: .88;
  transition: opacity .25s ease, transform .25s ease;
}
.tk-marca-item:hover .tk-marca-logo { opacity: 1; transform: scale(1.06); }

/* ============================================================
   SOLUÇÕES — cards de coleção: foto inteira, véu só na base
   ============================================================ */

.tk-sol-cabeca { margin-bottom: 26px; }
.tk-sol-h2 { margin: 0; font-size: 26px; font-weight: 900; }
.tk-sol-sub { margin: 4px 0 0; font-size: 14.5px; color: #777779; }

.tk-sol-grade {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.tk-sol {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1.46;
  background: #2E2D2F;
  color: #fff;
}
.tk-sol-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* respiro lento e contínuo. A classe .tk-vive é posta pelo JS só quando
     o bloco está na tela, para não gastar CPU rolando o resto da página. */
  transform: scale(1.04);
  will-change: transform;
}
.tk-vive .tk-sol-foto {
  animation: tk-respira 24s ease-in-out infinite;
  animation-play-state: running;
}
/* durações diferentes por card: em sincronia o efeito fica robótico */
.tk-vive .tk-sol:nth-child(2) .tk-sol-foto { animation-duration: 29s; animation-delay: -6s; }
.tk-vive .tk-sol:nth-child(3) .tk-sol-foto { animation-duration: 26s; animation-delay: -13s; }
.tk-vive .tk-sol:nth-child(4) .tk-sol-foto { animation-duration: 31s; animation-delay: -3s; }

@keyframes tk-respira {
  0%   { transform: scale(1.04) translate3d(0, 0, 0); }
  50%  { transform: scale(1.12) translate3d(-1.2%, -1%, 0); }
  100% { transform: scale(1.04) translate3d(0, 0, 0); }
}
/* no hover o movimento acelera, em vez de brigar com um transform novo */
.tk-vive .tk-sol:hover .tk-sol-foto { animation-duration: 9s; }

/* brilho que corre pela diagonal, no mesmo ângulo das faixas das fotos */
.tk-sol::after {
  content: '';
  position: absolute;
  top: -60%;
  bottom: -60%;
  width: 42%;
  left: -60%;
  background: linear-gradient(90deg,
    rgba(252, 175, 23, 0) 0%,
    rgba(252, 175, 23, .16) 45%,
    rgba(255, 255, 255, .10) 55%,
    rgba(252, 175, 23, 0) 100%);
  transform: skewX(-22deg);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
}
.tk-vive .tk-sol::after { animation: tk-brilho 9s ease-in-out infinite; }
.tk-vive .tk-sol:nth-child(2)::after { animation-delay: 2.2s; }
.tk-vive .tk-sol:nth-child(3)::after { animation-delay: 4.4s; }
.tk-vive .tk-sol:nth-child(4)::after { animation-delay: 6.6s; }

@keyframes tk-brilho {
  0%,  62% { left: -60%; opacity: 0; }
  68%      { opacity: 1; }
  88%      { left: 118%; opacity: 0; }
  100%     { left: 118%; opacity: 0; }
}

/* o véu escurece só o pé da foto, para o texto ler sem apagar a imagem */
.tk-sol-veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(46, 45, 47, .10) 0%,
    rgba(46, 45, 47, .16) 30%,
    rgba(46, 45, 47, .74) 60%,
    rgba(46, 45, 47, .96) 100%);
  pointer-events: none;
}

.tk-sol-texto {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.tk-sol-kicker {
  font-size: 12.5px;
  font-weight: 600;
  color: #D8D8D9;
  letter-spacing: .3px;
}
.tk-sol-titulo {
  /* duas linhas fixas: sem isso um título curto sobe o CTA e desalinha
     o card em relação aos vizinhos */
  min-height: 2.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
  font-size: clamp(21px, 1.75vw, 27px);
  font-weight: 900;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .4);
  hyphens: none;
}
/* sem caixa amarela: o CTA é texto, com um traço fino que cresce no hover */
.tk-sol-cta {
  margin-top: 14px;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 5px;
  position: relative;
}
.tk-sol-cta span { color: #FCAF17; }
.tk-sol-cta::after {
  content: '';
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 0;
  height: 2px;
  background: #FCAF17;
  transition: left .3s ease, right .3s ease;
}
.tk-sol:hover .tk-sol-cta::after { left: 0; right: 0; }

@media (max-width: 1152px) {
  .tk-sol-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tk-sol-titulo { font-size: 30px; }
}
@media (max-width: 738px) {
  .tk-sol-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   DESTAQUES DA SEMANA — carrossel em loop
   O veículo fica de perfil no palco, os vizinhos entram cortados
   pelas bordas e a caixa de dados vem por cima. O loop é infinito:
   o trilho tem clones nas duas pontas e salta sem transição.
   ============================================================ */

.tk-semana {
  position: relative;
  overflow: hidden;
  background: #fff;
  padding: 46px 0 34px;
  margin-top: 40px;
}
/* faixa diagonal clara ao fundo, para o branco não ficar chapado */
.tk-semana::before {
  content: '';
  position: absolute;
  top: -10%;
  bottom: 34%;
  left: -8%;
  width: 46%;
  background: #636362;
  opacity: .07;
  transform: skewX(-25deg);
  pointer-events: none;
}
.tk-semana::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  background: #F5F5F5;
  pointer-events: none;
}

.tk-semana-cabeca,
.tk-semana-pontos { position: relative; z-index: 3; }

.tk-semana-cabeca {
  max-width: 1560px;
  margin: 0 auto 10px;
  padding: 0 40px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
}
.tk-semana-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #777779;
}
.tk-semana-kicker i,
.tk-semana-h2 i {
  width: 22px;
  height: 5px;
  background: #FCAF17;
  transform: skewX(-30deg);
  flex: none;
}
.tk-semana-h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-size: clamp(30px, 3.2vw, 46px);
  font-weight: 900;
  line-height: 1.05;
  color: #2E2D2F;
  letter-spacing: -.01em;
}

.tk-semana-nav { display: flex; align-items: center; gap: 12px; }
.tk-semana-conta {
  font-size: 14px;
  font-weight: 700;
  color: #9c9c9e;
  font-variant-numeric: tabular-nums;
  margin-right: 6px;
}
.tk-semana-conta b { color: #414042; font-size: 19px; font-weight: 900; }
.tk-seta {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid #E6E6E6;
  background: #fff;
  color: #414042;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.tk-seta svg { width: 19px; height: 19px; }
.tk-seta:hover { background: #FCAF17; border-color: #FCAF17; transform: scale(1.06); }

/* ---- palco ---- */
.tk-palco {
  position: relative;
  z-index: 2;
  height: clamp(290px, 28vw, 405px);
  margin-top: 4px;
}

/* o modelo em letras gigantes, atrás do veículo */
.tk-palco-fundo {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  font-size: clamp(74px, 9.5vw, 150px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.03em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 2px rgba(46, 45, 47, .09);
  pointer-events: none;
  transition: opacity .35s ease;
}

.tk-trilho {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  will-change: transform;
}

/* Todos os slides no mesmo tamanho e com a mesma cor: os vizinhos são
   só recortados pela borda do palco, como na referência. Nada de
   opacidade nem cinza — o que centraliza a atenção é a caixa por cima. */
.tk-slide {
  position: relative;
  flex: 0 0 auto;
  width: 62%;
  padding: 0 2%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tk-slide img[data-espelhar] { transform: scaleX(-1); }
.tk-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center 42%;
  display: block;
  position: relative;
  z-index: 1;
}

/* sombra elíptica sob o veículo, para ele não flutuar */
.tk-slide-chao {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 4%;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(46, 45, 47, .30) 0%,
    rgba(46, 45, 47, .12) 45%,
    rgba(46, 45, 47, 0) 72%);
  opacity: .85;
}

/* ---- caixa de dados, por cima do palco ---- */
.tk-sem-caixa {
  position: relative;
  z-index: 4;
  max-width: 1560px;
  margin: -62px auto 0;
  padding: 0 40px;
}
.tk-sem-painel {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  background: #fff;
  padding: 20px 30px 22px;
  box-shadow: 0 22px 60px rgba(46, 45, 47, .18);
  /* corte enviesado no canto, como o resto do site */
  clip-path: polygon(0 0, 100% 0, calc(100% - 34px) 100%, 0 100%);
  animation: tk-sobe .45s cubic-bezier(.22, .61, .36, 1);
}
.tk-sem-painel[hidden] { display: none; }
@keyframes tk-sobe {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.tk-sem-selo {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 4px 11px;
  margin-bottom: 8px;
  background: #FCAF17;
  color: #414042;
}
.tk-sem-selo[data-badge="raridade"] { background: #b82b29; color: #fff; }

.tk-sem-nome {
  margin: 0;
  font-size: clamp(22px, 2.1vw, 29px);
  font-weight: 900;
  line-height: 1.1;
  color: #2E2D2F;
}
.tk-sem-linha { margin: 4px 0 0; font-size: 14px; color: #777779; }
.tk-sem-atrs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }

.tk-sem-dados {
  display: flex;
  gap: 30px;
  margin: 14px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid #EFEFEF;
}
.tk-sem-dados div { display: flex; flex-direction: column; gap: 2px; }
.tk-sem-dados dt {
  font-size: 10.5px;
  font-weight: 700;
  color: #9c9c9e;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.tk-sem-dados dd {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: #414042;
  font-variant-numeric: tabular-nums;
}

.tk-sem-fecho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid #EFEFEF;
}
.tk-sem-preco { display: flex; flex-direction: column; }
.tk-sem-preco small { font-size: 12px; font-weight: 600; color: #777779; }
.tk-sem-preco strong {
  font-size: 24px;
  font-weight: 900;
  color: #2E2D2F;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.tk-sem-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #FCAF17;
  color: #414042;
  font-size: 15px;
  font-weight: 800;
  padding: 12px 26px;
  margin-right: 18px;
  transition: background .2s ease;
}
.tk-sem-cta:hover { background: #e69e0d; color: #414042; }

/* ---- pontos ---- */
.tk-semana-pontos {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 20px;
}
.tk-ponto {
  width: 26px;
  height: 4px;
  border: none;
  padding: 0;
  background: #D8D8D9;
  cursor: pointer;
  transition: background .25s ease, width .25s ease;
}
.tk-ponto:hover { background: #9c9c9e; }
.tk-ponto.is-on { background: #FCAF17; width: 44px; }

@media (max-width: 810px) {
  .tk-slide { width: 84%; }
  .tk-sem-caixa { margin-top: -40px; }
  .tk-sem-painel { padding: 22px 24px 24px; clip-path: none; }
  .tk-sem-dados { gap: 22px; }
}

/* ============================================================
   VITRINE — a seção "Encontre seu caminhão"
   Única seção com CSS de verdade (o resto do site usa style inline
   herdado do handoff). Editar aqui, não no index.html.
   ============================================================ */

.tk-vitrine-cabeca {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}
.tk-vitrine-titulo { margin: 0; font-size: 26px; font-weight: 900; }
.tk-vitrine-sub { margin: 4px 0 0; font-size: 14.5px; color: #777779; }
.tk-vitrine-todos {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tk-vitrine-todos span { color: #636362; }

/* ---- barra de filtros ---- */
.tk-filtros { border-bottom: 1px solid #E6E6E6; }

.tk-chips { display: flex; gap: 26px; flex-wrap: wrap; }
.tk-chip {
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  padding: 0 2px 12px;
  font-family: 'Cairo', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: #777779;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
}
.tk-chip:hover { color: #414042; }
.tk-chip.is-on { font-weight: 800; color: #414042; border-bottom-color: #FCAF17; }
.tk-chip-n {
  font-size: 11.5px;
  font-weight: 700;
  color: #777779;
  background: #F2F2F3;
  padding: 1px 7px;
  font-variant-numeric: tabular-nums;
}
.tk-chip.is-on .tk-chip-n { background: #FCAF17; color: #414042; }

/* tração como chips, ao lado da carroceria: o briefing pede o filtro com
   destaque e acesso fácil. O <select> continua no DOM, escondido, porque é
   por ele que a busca por voz e os atalhos entram. */
.tk-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.tk-tracoes {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 0 2px;
}
.tk-tracoes-rotulo {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #636362;
}
.tk-tracoes-lista { display: flex; gap: 7px; flex-wrap: wrap; }
.tk-tchip {
  background: #fff;
  border: 1px solid #E6E6E6;
  font-family: 'Cairo', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: #414042;
  padding: 6px 14px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: border-color .18s ease, background .18s ease;
}
.tk-tchip:hover { border-color: #FCAF17; }
.tk-tchip.is-on { background: #414042; border-color: #414042; color: #fff; }

.tk-campos {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 0 18px;
}
.tk-campo { display: flex; flex-direction: column; gap: 5px; }
.tk-campo-rotulo { font-size: 11.5px; font-weight: 700; color: #777779; letter-spacing: .3px; }
.tk-select {
  font-family: 'Cairo', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #414042;
  background: #fff;
  border: 1px solid #E6E6E6;
  border-radius: 0;
  padding: 8px 12px;
  min-width: 132px;
  cursor: pointer;
}
.tk-select:hover { border-color: #FCAF17; }
.tk-campos .tk-campo:last-of-type { margin-left: auto; }
.tk-limpar {
  align-self: flex-end;
  background: none;
  border: 1px solid #E6E6E6;
  font-family: 'Cairo', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: #777779;
  padding: 9px 16px;
  cursor: pointer;
}
.tk-limpar:hover { border-color: #FCAF17; color: #414042; }

/* filtros que vieram do painel do hero, removíveis um a um */
.tk-aplicados { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tk-aplicados[hidden] { display: none; }
.tk-aplicado {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #414042;
  border: none;
  color: #fff;
  font-family: 'Cairo', sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 12px;
  cursor: pointer;
}
.tk-aplicado span { color: #FCAF17; font-size: 15px; line-height: 1; }
.tk-aplicado:hover { background: #2E2D2F; }

.tk-resultado {
  margin: 16px 0 18px;
  font-size: 13.5px;
  font-weight: 700;
  color: #777779;
  font-variant-numeric: tabular-nums;
}

/* ---- grade e cards ---- */
.tk-grade {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.tk-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #E6E6E6;
  overflow: hidden;
}
.tk-card:hover { border-color: #FCAF17; box-shadow: 0 10px 26px rgba(65, 64, 66, .08); }
.tk-card[hidden] { display: none; }

.tk-card-foto { position: relative; height: 158px; }
.tk-card-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* a cor da tag diz o tipo antes de a pessoa ler a palavra:
   amarelo = escolha da casa, verde = preço bom, grafite = peça rara */
.tk-badge {
  position: absolute;
  left: 12px;
  top: 12px;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 12px;
  pointer-events: none;
  background: #FCAF17;
  color: #414042;
}
.tk-badge[data-badge="oferta"] { background: #FCAF17; color: #414042; }
.tk-badge[data-badge="raridade"] { background: #b82b29; color: #fff; }

/* linha de atributos: verde reduz risco, grafite conta a procedencia.
   Sem vermelho: num bem de meio milhao ele le como alerta, nao como oferta
   (ver ESTUDO-TAGS.md). */
.tk-atributos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 9px 0 0;
}
.tk-atr {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2px;
  padding: 3px 8px 3px 6px;
  white-space: nowrap;
}
.tk-atr svg { width: 12px; height: 12px; flex: none; }
/* verde do guia (#7eae5f) no ícone; no texto ele vai escurecido, porque
   verde claro sobre fundo claro não tem contraste para corpo pequeno */
.tk-atr[data-tipo="risco"]  { background: #EFF6EA; color: #4d7a37; }
.tk-atr[data-tipo="risco"] svg { color: #7eae5f; }
.tk-atr[data-tipo="origem"] { background: #EFEFF0; color: #414042; }
.tk-atr[data-tipo="origem"] svg { color: #777779; }

/* km baixo sai do proprio dado, nao de um selo que alguem precisa marcar */
.tk-ficha dd.is-baixo { color: #4d7a37; }
.tk-favorito {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: #414042;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.tk-favorito:hover { color: #FCAF17; }
.tk-favorito[aria-pressed="true"] { background: #FCAF17; color: #414042; }
.tk-favorito[aria-pressed="true"] svg { fill: #414042; }

.tk-card-topo { padding: 15px 18px 0; }
/* título no padrão do anúncio: marca, configuração, ano, tipo e praça */
.tk-card-nome {
  margin: 0;
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.32;
  text-transform: uppercase;
  letter-spacing: .01em;
  /* três linhas fixas: sem isso os preços de cada card desalinham */
  min-height: 57px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tk-card-preco { padding: 12px 18px 0; }
.tk-de {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #9c9c9e;
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
.tk-linha-preco {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 1px;
}
.tk-por { font-size: 19px; font-weight: 900; color: #414042; font-variant-numeric: tabular-nums; }
.tk-simule {
  font-size: 13px;
  font-weight: 600;
  color: #777779;
  border-bottom: 1px solid #C9C9CA;
  white-space: nowrap;
}
.tk-simule:hover { color: #414042; border-bottom-color: #FCAF17; }

/* ficha de quatro dados, no padrão do anúncio; a silhueta ocupa o lugar
   do ícone de configuração, que é onde ela informa mais */
.tk-ficha {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 14px 14px 0;
  padding: 12px 0 2px;
  border-top: 1px solid #EFEFEF;
}
.tk-ficha-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  min-width: 0;
}
.tk-ficha-item + .tk-ficha-item { border-left: 1px solid #EFEFEF; }
.tk-ficha-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  color: #636362;
}
.tk-ficha-icone svg { width: 21px; height: 21px; }
.tk-silhueta { color: #414042; }
.tk-silhueta svg { width: 46px; height: 17px; }
.tk-ficha dt {
  font-size: 9.5px;
  font-weight: 700;
  color: #9c9c9e;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.tk-ficha dd {
  margin: 0;
  font-size: 11.5px;
  font-weight: 800;
  color: #414042;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.tk-card-pe { padding: 0; margin-top: auto; }
.tk-ver {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  padding: 13px 18px;
  border-top: 1px solid #EFEFEF;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  transition: background .2s ease;
}
.tk-ver span { color: #636362; }
.tk-card:hover .tk-ver { background: #F7F7F8; color: #414042; box-shadow: inset 0 -3px 0 #FCAF17; }

/* ---- faixa de banners no meio dos classificados ----
   Ocupa a linha inteira da grade, entre a 2ª e a 3ª fileira de cards.
   O JS reposiciona a faixa depois de cada filtro, porque a ordem dos
   cards muda. */
.tk-faixa-ban {
  grid-column: 1 / -1;
  margin: 4px 0 6px;
}
.tk-ban-palco {
  position: relative;
  /* mesma proporção dos arquivos (2048x264) */
  aspect-ratio: 2048 / 264;
  overflow: hidden;
  background: #2E2D2F;
}
.tk-ban {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease, visibility 0s linear .6s;
}
.tk-ban[data-on] {
  opacity: 1;
  visibility: visible;
  transition: opacity .6s ease, visibility 0s;
}
.tk-ban img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tk-ban-pontos {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 10px;
}
.tk-ban-ponto {
  width: 20px;
  height: 3px;
  border: none;
  padding: 0;
  background: #D8D8D9;
  cursor: pointer;
  transition: background .25s ease, width .25s ease;
}
.tk-ban-ponto:hover { background: #9c9c9e; }
.tk-ban-ponto.is-on { background: #FCAF17; width: 34px; }

/* a revelação em cascata não deve esconder a faixa */
.tk-anima .tk-faixa-ban { opacity: 1; }

/* ---- revelação no scroll ----
   A classe .tk-anima é posta pelo JS: sem script, os cards nascem visíveis.
   A cortina sai no mesmo ângulo das diagonais do logo, em cascata. */
.tk-anima .tk-card {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
}
.tk-anima .tk-card-foto::after,
.tk-anima .tk-card-foto::before {
  content: '';
  position: absolute;
  inset: -2px -30% -2px -2px;
  transform: skewX(-12deg);
  transform-origin: top left;
  transition: transform .72s cubic-bezier(.65, .05, .25, 1);
  pointer-events: none;
  z-index: 2;
}
.tk-anima .tk-card-foto::before { background: #2E2D2F; }
/* a faixa amarela corre um pouco atrás e é a última coisa a sair */
.tk-anima .tk-card-foto::after {
  background: #FCAF17;
  inset: -2px -30% -2px 78%;
  transition-duration: .86s;
}

.tk-anima .tk-card.is-visivel { opacity: 1; transform: none; }
.tk-anima .tk-card.is-visivel .tk-card-foto::before { transform: skewX(-12deg) translateX(140%); }
.tk-anima .tk-card.is-visivel .tk-card-foto::after { transform: skewX(-12deg) translateX(180%); }

.tk-vazio { margin: 40px 0 0; font-size: 15px; color: #777779; text-align: center; }
.tk-vazio-link {
  background: none;
  border: none;
  font-family: 'Cairo', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #414042;
  border-bottom: 2px solid #FCAF17;
  padding: 0;
  cursor: pointer;
}

@media (max-width: 1152px) {
  .tk-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 882px) {
  .tk-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-campos .tk-campo:last-of-type { margin-left: 0; }
}

/* ============================================================
   CANAL — bento diagonal com o vídeo do destaque tocando
   O bloco é o momento gráfico da página: diagonais grandes do "K",
   tipografia estourada correndo no scroll e cortes enviesados nos cards.
   ============================================================ */

.tk-tubo {
  position: relative;
  overflow: hidden;
  background: #F5F5F5;
  color: #414042;
  margin-top: 72px;
  padding: 1px 0;   /* segura as margens dos filhos */
}
.tk-tubo-dentro { position: relative; z-index: 2; max-width: 1560px; margin: 0 auto; padding: 66px 40px 74px; }

/* ---- fundo: duas faixas diagonais + a palavra gigante ---- */
.tk-tubo-fundo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.tk-tubo-diag {
  position: absolute;
  top: -20%;
  bottom: -20%;
  transform: skewX(-25deg);
}
.tk-tubo-diag--1 { left: -6%; width: 26%; background: #FCAF17; opacity: .10; }
.tk-tubo-diag--2 { right: -10%; width: 34%; background: #2E2D2F; opacity: .05; }

.tk-tubo-palavra {
  position: absolute;
  top: 46%;
  left: 0;
  white-space: nowrap;
  display: inline-block;
  font-size: clamp(130px, 16vw, 260px);
  font-weight: 900;
  line-height: .78;
  letter-spacing: -.03em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(99, 99, 98, .28);
  will-change: transform;
}

/* ---- cabeça ---- */
.tk-tubo-cabeca {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 34px;
}
.tk-tubo-selo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #2E2D2F;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 7px 16px 7px 13px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.tk-tubo-selo svg { width: 24px; height: 17px; color: #FCAF17; flex: none; }
.tk-tubo-h2 {
  margin: 16px 0 0;
  font-size: clamp(34px, 3.6vw, 52px);
  font-weight: 900;
  line-height: 1.05;
  color: #2E2D2F;
  letter-spacing: -.01em;
}
/* a segunda linha ganha o traço amarelo do "K" por baixo */
.tk-tubo-h2 em {
  font-style: normal;
  position: relative;
  display: inline-block;
}
.tk-tubo-h2 em::after {
  content: '';
  position: absolute;
  left: -4px;
  right: -4px;
  bottom: .06em;
  height: .30em;
  background: #FCAF17;
  transform: skewX(-16deg);
  z-index: -1;
}

.tk-tubo-inscrever {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #2E2D2F;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  padding: 15px 26px;
  white-space: nowrap;
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  padding-right: 40px;
  transition: background .2s ease;
}
.tk-tubo-inscrever:hover { background: #FCAF17; color: #414042; }
.tk-tubo-inscrever svg { width: 18px; height: 18px; }

/* ---- bento: destaque alto à esquerda, um card largo e três menores ---- */
.tk-tubo-bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 208px;
  gap: 16px;
}
.tk-v--destaque { grid-column: span 3; grid-row: span 2; }
.tk-v--larga    { grid-column: span 3; }
.tk-v--p        { grid-column: span 1; }

/* Cantos retos: cada card cortado num canto diferente deixava o bloco
   irregular. A diagonal do logo fica só no play e no selo, onde é pequena
   e some no conjunto. */
.tk-v {
  position: relative;
  display: block;
  overflow: hidden;
  background: #2E2D2F;
  color: #fff;
}

.tk-v-capa { position: absolute; inset: 0; display: block; }
.tk-v-capa img,
.tk-v-capa iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}
/* o iframe do destaque precisa cobrir a área toda sem barras pretas */
.tk-v-capa iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, 178%);
  height: max(100%, 178%);
  pointer-events: none;
}
.tk-v-capa::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(29, 28, 30, .22) 0%,
    rgba(29, 28, 30, .30) 42%,
    rgba(29, 28, 30, .90) 100%);
}
.tk-v-capa img { transition: transform .6s cubic-bezier(.22, .61, .36, 1); }
.tk-v:hover .tk-v-capa img { transform: scale(1.07); }

/* número do episódio estourado, meio de fora do card */
.tk-v-ep {
  position: absolute;
  right: -6px;
  top: -18px;
  z-index: 2;
  font-size: 84px;
  font-weight: 900;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, .38);
  pointer-events: none;
  transition: color .3s ease, -webkit-text-stroke-color .3s ease;
}
.tk-v--destaque .tk-v-ep { font-size: 132px; right: 24px; top: -28px; }
.tk-v:hover .tk-v-ep { color: rgba(252, 175, 23, .22); -webkit-text-stroke-color: #FCAF17; }

.tk-v-play {
  position: absolute;
  left: 22px;
  top: 20px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 32px;
  background: rgba(255, 255, 255, .92);
  color: #2E2D2F;
  clip-path: polygon(16% 0, 100% 0, 84% 100%, 0 100%);
  transition: transform .25s ease;
}
.tk-v-play svg { width: 17px; height: 17px; }
.tk-v--destaque .tk-v-play { width: 62px; height: 44px; }
.tk-v--destaque .tk-v-play svg { width: 24px; height: 24px; }
.tk-v:hover .tk-v-play { transform: scale(1.12); background: #FCAF17; }

.tk-v-dur {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  background: rgba(29, 28, 30, .85);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 8px;
  font-variant-numeric: tabular-nums;
}
.tk-v--destaque .tk-v-dur,
.tk-v--larga .tk-v-dur { right: 18px; bottom: 18px; }

.tk-v-texto {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 18px;
  z-index: 2;
  display: block;
}
.tk-v--destaque .tk-v-texto { left: 30px; right: 34px; bottom: 28px; }
.tk-v--larga .tk-v-texto { left: 24px; }

.tk-v-titulo {
  display: block;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
}
.tk-v--larga .tk-v-titulo { font-size: 21px; }
.tk-v--destaque .tk-v-titulo { font-size: clamp(24px, 2.1vw, 32px); line-height: 1.12; }
.tk-v-desc {
  display: block;
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.5;
  color: #D8D8D9;
  max-width: 440px;
}

@media (max-width: 1062px) {
  .tk-tubo-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 190px; }
  .tk-v--destaque { grid-column: span 4; }
  .tk-v--larga { grid-column: span 4; }
  .tk-v--p { grid-column: span 2; }
}
@media (max-width: 648px) {
  .tk-tubo-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-v--destaque, .tk-v--larga { grid-column: span 2; }
}

/* ============================================================
   LISTA — favoritos que a pessoa despacha no WhatsApp
   ============================================================ */

.tk-barra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: #2E2D2F;
  box-shadow: 0 -8px 30px rgba(46, 45, 47, .28);
}
.tk-barra[hidden] { display: none; }
.tk-barra-dentro {
  max-width: 1560px;
  margin: 0 auto;
  padding: 14px 40px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.tk-barra-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: #FCAF17;
  color: #414042;
  flex: none;
  clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
}
.tk-barra-icone svg { width: 17px; height: 17px; }
.tk-barra-conta {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.tk-barra-limpar {
  background: none;
  border: none;
  font-family: 'Cairo', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: #9c9c9e;
  cursor: pointer;
  padding: 6px 2px;
  border-bottom: 1px solid transparent;
}
.tk-barra-limpar:hover { color: #fff; border-bottom-color: #FCAF17; }
.tk-barra-zap {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #25D366;
  color: #0b3d20;
  font-size: 15px;
  font-weight: 800;
  padding: 12px 26px;
  transition: background .2s ease;
}
.tk-barra-zap:hover { background: #1eb955; color: #0b3d20; }
.tk-barra-zap svg { width: 19px; height: 19px; }

/* com a barra na tela, o rodapé não pode ficar escondido atrás dela */
body.tem-lista footer { padding-bottom: 68px; }

@media (max-width: 648px) {
  .tk-barra-dentro { padding: 12px 20px; gap: 12px; flex-wrap: wrap; }
  .tk-barra-zap { margin-left: 0; width: 100%; justify-content: center; }
}

/* ============================================================
   ABA LATERAL + WHATSAPP FLUTUANTE
   ============================================================ */

.tk-aba {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 45;
  display: flex;
  align-items: center;
  /* na direita: a lingueta encosta na borda e o painel abre para dentro */
  flex-direction: row-reverse;
}

/* a lingueta: texto de pé, como na referência */
.tk-aba-lingueta {
  border: none;
  background: #b82b29;
  color: #fff;
  font-family: 'Cairo', sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 22px 11px;
  cursor: pointer;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  /* corte enviesado na ponta de fora, no ângulo do logo */
  clip-path: polygon(0 14px, 100% 0, 100% 100%, 0 calc(100% - 14px));
  transition: background .2s ease, padding .2s ease;
  box-shadow: -4px 0 18px rgba(46, 45, 47, .18);
}
.tk-aba-lingueta:hover { background: #9e2422; padding-left: 15px; }

.tk-aba-painel {
  position: relative;
  width: 340px;
  background: #fff;
  box-shadow: 0 24px 64px rgba(46, 45, 47, .30);
  animation: tk-abre-aba .38s cubic-bezier(.22, .61, .36, 1);
}
.tk-aba-painel[hidden] { display: none; }
@keyframes tk-abre-aba {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: none; }
}

.tk-aba-fechar {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 30px;
  height: 30px;
  border: none;
  background: none;
  color: #777779;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tk-aba-fechar svg { width: 15px; height: 15px; }
.tk-aba-fechar:hover { color: #414042; }

.tk-aba-topo {
  background: #2E2D2F;
  padding: 20px 22px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tk-aba-selo {
  background: #FCAF17;
  color: #414042;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 4px 10px;
}
.tk-aba-num { display: flex; align-items: baseline; gap: 6px; color: #fff; }
.tk-aba-num b { font-size: 30px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.tk-aba-num small { font-size: 11.5px; font-weight: 600; color: #C9C9CA; }

.tk-aba-corpo { padding: 20px 22px 22px; }
.tk-aba-corpo h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.2;
  color: #2E2D2F;
}
.tk-aba-corpo p {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #777779;
}
.tk-aba-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  background: #FCAF17;
  color: #414042;
  font-size: 14.5px;
  font-weight: 800;
  padding: 13px;
  transition: background .2s ease;
}
.tk-aba-cta:hover { background: #e69e0d; color: #414042; }
.tk-aba-nota {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  color: #9c9c9e;
  text-align: center;
}

/* ---- WhatsApp flutuante ---- */
.tk-zap {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 44;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(37, 211, 102, .42);
  transition: transform .2s ease, background .2s ease, bottom .3s ease;
}
.tk-zap svg { width: 30px; height: 30px; position: relative; z-index: 1; }
.tk-zap:hover { background: #1eb955; color: #fff; transform: scale(1.07); }

/* o anel que pisca; some no hover, para não competir com o clique */
.tk-zap-pulso {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  animation: tk-pisca 2.4s cubic-bezier(.22, .61, .36, 1) infinite;
}
.tk-zap:hover .tk-zap-pulso { animation-play-state: paused; opacity: 0; }
@keyframes tk-pisca {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(1.75); opacity: 0; }
  100% { transform: scale(1.75); opacity: 0; }
}

/* com a lista aberta, o botão sobe para não ficar atrás da barra */
body.tem-lista .tk-zap { bottom: 96px; }

@media (max-width: 810px) {
  .tk-aba-lingueta { font-size: 11px; letter-spacing: 2px; padding: 18px 9px; }
  .tk-aba-painel { width: 280px; }
  .tk-zap { right: 16px; bottom: 16px; width: 52px; height: 52px; }
  .tk-zap svg { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .tk-zap-pulso { display: none; }
}

/* ============================================================
   PERFIL — três perguntas no primeiro acesso
   Cada resposta vira filtro. Fica no navegador do visitante.
   ============================================================ */

.tk-perfil {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.tk-perfil[hidden] { display: none; }
.tk-perfil-fundo { position: absolute; inset: 0; background: rgba(29, 28, 30, .74); backdrop-filter: blur(3px); }

.tk-perfil-caixa {
  position: relative;
  width: 100%;
  max-width: 760px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #fff;
  padding: 40px 44px 30px;
  box-shadow: 0 30px 80px rgba(29, 28, 30, .4);
  animation: tk-perfil-entra .34s cubic-bezier(.22, .61, .36, 1);
}
@keyframes tk-perfil-entra {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.tk-perfil-x {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 34px;
  height: 34px;
  border: none;
  background: none;
  color: #777779;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tk-perfil-x svg { width: 16px; height: 16px; }
.tk-perfil-x:hover { color: #414042; }

.tk-perfil-passos { display: flex; gap: 6px; margin-bottom: 22px; }
.tk-perfil-passos i {
  width: 34px;
  height: 4px;
  background: #E6E6E6;
  transition: background .25s ease, width .25s ease;
}
.tk-perfil-passos i.is-on { background: #FCAF17; width: 52px; }

.tk-perfil-passo[hidden] { display: none; }
.tk-perfil-conta {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #636362;
}
.tk-perfil-titulo {
  margin: 8px 0 0;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 900;
  line-height: 1.12;
  color: #2E2D2F;
}
.tk-perfil-sub { margin: 7px 0 0; font-size: 14.5px; color: #777779; }

.tk-perfil-grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}
.tk-perfil-grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.tk-op {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  background: #fff;
  border: 1px solid #E6E6E6;
  padding: 16px 16px 15px;
  font-family: 'Cairo', sans-serif;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tk-op:hover { border-color: #FCAF17; transform: translateY(-2px); }
.tk-op.is-on { border-color: #414042; box-shadow: inset 0 -3px 0 #FCAF17; }
.tk-op--texto { justify-content: center; min-height: 92px; }
.tk-op-sil { display: block; color: #414042; margin-bottom: 6px; }
.tk-op-sil svg { width: 74px; height: 26px; }
.tk-op-t { font-size: 15px; font-weight: 800; color: #2E2D2F; line-height: 1.2; }
.tk-op-d { font-size: 12.5px; color: #777779; line-height: 1.35; }

.tk-perfil-marcas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tk-pmarca {
  background: #fff;
  border: 1px solid #E6E6E6;
  font-family: 'Cairo', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #414042;
  padding: 9px 18px;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.tk-pmarca:hover { border-color: #FCAF17; }
.tk-pmarca[aria-pressed="true"] { background: #414042; border-color: #414042; color: #fff; }

.tk-perfil-nome {
  width: 100%;
  margin-top: 20px;
  border: 1px solid #E6E6E6;
  padding: 15px 18px;
  font-family: 'Cairo', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #414042;
  outline: none;
}
.tk-perfil-nome:focus { border-color: #FCAF17; }

/* simulação com as condições que a Trucket publica: entrada 38%, 24x,
   2,5% a.m. Nada estimado por conta própria. */
.tk-simulacao {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 18px;
  padding: 16px 18px;
  background: #F5F5F5;
  border-left: 4px solid #FCAF17;
}
.tk-simulacao[hidden] { display: none; }
.tk-simulacao-rot {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #636362;
}
.tk-simulacao-valor {
  font-size: 25px;
  font-weight: 900;
  color: #2E2D2F;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.tk-simulacao-det { font-size: 12.5px; color: #777779; line-height: 1.45; }

.tk-perfil-fecho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid #EFEFEF;
}
/* a leitura do perfil: devolver o que foi entendido é o que faz
   parecer inteligente, mais do que aplicar o filtro em silêncio */
.tk-perfil-leitura {
  margin: 0;
  font-size: 14.5px;
  color: #414042;
  line-height: 1.45;
  flex: 1;
  min-width: 240px;
}
.tk-perfil-leitura b { font-weight: 800; }
.tk-perfil-ok {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #FCAF17;
  border: none;
  font-family: 'Cairo', sans-serif;
  font-size: 15.5px;
  font-weight: 800;
  color: #414042;
  padding: 14px 28px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s ease;
}
.tk-perfil-ok:hover { background: #e69e0d; }

.tk-perfil-pular {
  display: block;
  margin: 20px auto 0;
  background: none;
  border: none;
  font-family: 'Cairo', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #777779;
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
.tk-perfil-pular:hover { color: #414042; border-bottom-color: #C9C9CA; }

/* ---- faixa do perfil salvo ---- */
.tk-perfil-faixa {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 1560px;
  margin: 0 auto;
  padding: 12px 40px;
}
.tk-perfil-faixa[hidden] { display: none; }
/* a solução que combina com o porte informado ganha destaque */
.tk-sol.is-perfil { box-shadow: 0 0 0 3px #FCAF17; }
.tk-perfil-faixa-txt { font-size: 14.5px; color: #414042; }
.tk-perfil-faixa-txt b { font-weight: 800; }
.tk-perfil-faixa-ver {
  background: #414042;
  border: none;
  font-family: 'Cairo', sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  color: #fff;
  padding: 9px 18px;
  cursor: pointer;
}
.tk-perfil-faixa-ver:hover { background: #FCAF17; color: #414042; }
.tk-perfil-faixa-editar {
  background: none;
  border: none;
  font-family: 'Cairo', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #777779;
  cursor: pointer;
  border-bottom: 1px solid #C9C9CA;
  padding: 0 0 1px;
}
.tk-perfil-faixa-editar:hover { color: #414042; border-bottom-color: #FCAF17; }

@media (max-width: 738px) {
  .tk-perfil-caixa { padding: 30px 22px 22px; }
  .tk-perfil-grade, .tk-perfil-grade--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-perfil-ok { width: 100%; justify-content: center; }
}

/* ---- placeholder de imagem ainda não entregue (ver ASSETS.md) ---- */
.tk-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  background:
    repeating-linear-gradient(115deg, #3a393b 0 14px, #333234 14px 28px);
  color: #9c9c9e;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .5px;
  line-height: 1.3;
}

/* ---- foco visível (o handoff zera outline nos inputs) ---- */
input:focus-visible,
button:focus-visible,
a:focus-visible { outline: 2px solid #FCAF17; outline-offset: 2px; }

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

/* ---- ajuste de telas menores (desktop é a referência) ---- */
@media (max-width: 1152px) {
  [data-hero] h1 { font-size: 50px; }
}
/* ---- menu no celular ----
   Abaixo de 922px a navegacao era escondida com `display:none !important`
   e NADA entrava no lugar: no celular o visitante nao tinha como chegar
   em Servicos, Sobre, Clientes ou Contato. So o logo e o WhatsApp.
   Agora o menu vira um painel aberto por um botao de tres tracos, com
   os subitens de Servicos ja abertos (no toque nao existe hover). */
.tk-burger { display: none; }

@media (max-width: 922px) {
  header > div { gap: 14px !important; padding: 10px 20px !important; }
  /* o numero por extenso quebrava em tres linhas; fica o icone, que
     continua sendo um link de ligar */
  header a[href^="tel:"] { font-size: 0 !important; gap: 0 !important; padding: 12px; min-width: 46px; min-height: 46px; justify-content: center; }
  header a[href^="tel:"] svg { width: 20px; height: 20px; }
  header a[href^="https://wa.me"] { padding: 9px 14px !important; }
  header a[href^="https://wa.me"] span { display: none; }

  .tk-burger {
    order: -1;
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 48px; height: 48px; padding: 0 12px; margin-left: -12px;
    background: none; border: 0; cursor: pointer;
  }
  .tk-burger span {
    display: block; height: 2.5px; background: #2E2D2F;
    transition: transform .2s ease, opacity .2s ease;
  }
  header.tk-menu-aberto .tk-burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  header.tk-menu-aberto .tk-burger span:nth-child(2) { opacity: 0; }
  header.tk-menu-aberto .tk-burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  header nav.tk-nav {
    position: fixed; left: 0; right: 0; top: var(--tk-topo, 66px); bottom: 0;
    z-index: 60;
    display: flex; flex-direction: column; align-items: stretch;
    justify-content: flex-start; gap: 0;
    background: #fff; padding: 8px 20px 32px;
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-100%); visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
  }
  header.tk-menu-aberto nav.tk-nav {
    transform: none; visibility: visible;
    transition: transform .25s ease;
  }
  header nav.tk-nav > a,
  header nav.tk-nav .tk-nav-botao {
    display: flex; align-items: center;
    min-height: 54px; padding: 0 4px;
    font-size: 18px; font-weight: 700; color: #2E2D2F;
    border-bottom: 1px solid #EDEDEE;
  }
  header nav.tk-nav .tk-nav-seta { display: none; }
  header nav.tk-nav .tk-nav-drop::after { display: none; }
  header nav.tk-nav .tk-nav-lista {
    position: static; display: block; opacity: 1; visibility: visible;
    transform: none; box-shadow: none; border: 0; min-width: 0;
    padding: 0 0 6px 14px; background: none;
  }
  header nav.tk-nav .tk-nav-lista a {
    display: flex; align-items: center; min-height: 48px;
    padding: 0 4px; font-size: 16px; color: #414042;
    border-bottom: 1px solid #F2F2F3;
  }
  body.tk-sem-rolagem { overflow: hidden; }
}

/* caminho da vitrine da home para a listagem completa (estoque.html) */
.tk-vitrine-mais { margin: 34px 0 0; text-align: center; }
.tk-vitrine-mais a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid #2E2D2F;
  color: #2E2D2F;
  padding: 15px 34px;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.tk-vitrine-mais a:hover { background: #2E2D2F; color: #fff; }


/* ==================================================================
   RODAPE — em todas as paginas (as institucionais copiam o do index).
   Era o que o handoff deixou: telefone (41) 3045-1234 e endereco na
   BR-116 que NAO sao da Trucket, razao social inventada, "Personalizacao"
   e "Oficina" levando para a pagina Sobre, e cinco "icones" de rede
   social que eram <span> com letras — nao eram links. A grade de seis
   colunas fixas tambem era o que fazia as treze paginas rolarem de lado
   no celular.

   Dados reais: extracao do site atual (extracao-trucket.md). Instagram,
   Facebook e LinkedIn existem no site atual mas as URLs nao foram
   extraidas — entram quando chegarem; inventar o @ seria pior que nada.
   ================================================================== */
.tk-rodape { background: #2E2D2F; color: #C9C9CA; }
.tk-rodape a { color: #C9C9CA; text-decoration: none; }
.tk-rodape a:hover { color: #FCAF17; }
.tk-rodape-grade {
  max-width: 1560px; margin: 0 auto; padding: 52px 40px 32px;
  display: grid; grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); gap: 36px;
}
.tk-rodape-grade > div { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* `align-self` porque a coluna e flex em pe, e flex em pe ESTICA os
   filhos na largura: o logo era puxado para a coluna inteira e saia
   achatado. Os atributos width/height do <img> seguem a proporcao real
   do arquivo (185x28), para nao reservar espaco errado antes de carregar. */
.tk-rodape-marca img { display: block; align-self: flex-start; height: 26px; width: auto; max-width: 100%; }
.tk-rodape-marca p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55; max-width: 30ch; }
.tk-rodape-marca address { font-style: normal; font-size: 13.5px; line-height: 1.55; }
.tk-rodape-tit { margin: 0 0 4px; color: #fff; font-weight: 800; font-size: 14px; }
.tk-rodape-grade a { font-size: 13.5px; }
.tk-rodape-contato a b { color: #fff; font-weight: 700; margin-right: 6px; }
.tk-rodape-hora { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: #A9A9AB; }
.tk-rodape-base { border-top: 1px solid rgba(255,255,255,.12); }
.tk-rodape-base > div {
  /* 96px a direita: o botao flutuante do WhatsApp (fixo no canto) cobria o
     ultimo icone de rede social quando se chegava ao fim da pagina */
  max-width: 1560px; margin: 0 auto; padding: 18px 96px 18px 40px;
  display: flex; flex-wrap: wrap; gap: 12px 24px;
  align-items: center; justify-content: space-between;
  font-size: 12.5px; color: #9c9c9e;
}
.tk-rodape-yt { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }

@media (max-width: 1062px) {
  .tk-rodape-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tk-rodape-marca { grid-column: 1 / -1; }
}
@media (max-width: 648px) {
  .tk-rodape-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 40px 20px 26px; gap: 28px 20px; }
  .tk-rodape-contato { grid-column: 1 / -1; }
  /* no celular os links do rodape precisam de alvo de dedo */
  .tk-rodape-grade a { display: flex; align-items: center; min-height: 46px; font-size: 15px; }
  .tk-rodape-grade > div { gap: 0; }
  .tk-rodape-tit { margin-bottom: 6px; }
  .tk-rodape-base > div { padding: 18px 20px 90px; }
}

/* alvos secundarios no celular: migalha e links de texto ganham area de
   toque sem mudar de tamanho visual */
@media (max-width: 648px) {
  .pgh-trilha a, .tk-migalha a { display: inline-block; padding: 12px 2px; margin: -12px 0; }
  .tk-rodape-yt { min-height: 46px; }
  .pg-link { display: inline-flex; align-items: center; min-height: 46px; }
  .tk2-voz { min-width: 46px; min-height: 46px; }
  .tk-cartao-fav, .tk2-fav { min-width: 46px; min-height: 46px; }
  /* o link do logo tinha 24px de altura: so a imagem */
  header a[aria-label^="Trucket"] { display: flex; align-items: center; min-height: 46px; }
}

/* as quatro redes, com icone e o nome no aria-label: antes eram <span>
   com "f", "ig", "in", "yt" e "x" — nao eram links, e o "x" nem existe
   no site atual */
.tk-rodape-marca p b { color: #fff; font-weight: 800; }
.tk-rodape-redes { display: flex; gap: 8px; }
.tk-rodape-redes a {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  background: rgba(255,255,255,.08); color: #fff;
}
.tk-rodape-redes a:hover { background: #FCAF17; color: #2E2D2F; }
.tk-rodape-redes svg { width: 18px; height: 18px; }
@media (max-width: 648px) {
  .tk-rodape-redes a { width: 46px; height: 46px; }
}