/* ============================================================================
   SKIN TURBO — esportivo/jovem (grafite + vermelho, Poppins, cortes diagonais)
   Classes .tb-*. Canvas grafite FIXO; herda só o ACENTO (vermelho = fallback) do
   tema do cliente. Cantos retos (raio 0) + clip-path diagonal em botões/tags.
   Consome as CSS vars só p/ o acento/botões (NÃO --main-bg/text). Ver template-skins.
   ========================================================================== */

.tb {
  --acc:   var(--main-primary-color, #FF2D2D);
  /* ⭐ O acento quando ele é TEXTO sobre o grafite fixo desta skin. `--acc` continua
     valendo para FUNDO (aí quem muda é a tinta, `--*-ink`). Marca escura escrevia o
     preço e o botão fantasma em 1,8:1 aqui dentro. A variante é gerada junto da cor,
     preserva o matiz e devolve a própria cor quando ela já passa — o #FF2D2D de
     referência desta skin não muda um bit. */
  --acc-fg: var(--main-primary-color-on-dark, var(--main-primary-color, #FF2D2D));
  --acc2:  var(--main-secondary-color, var(--acc));
  --btn:   var(--button-color, var(--acc));
  --btn-h: var(--button-hover-color, color-mix(in srgb, var(--btn) 82%, #000));

  --tb-bg:   #121214;
  --tb-sec:  #0C0C0E;
  --tb-card: #1B1B1E;
  --tb-foot: #0C0C0E;
  --tb-tx:   #F2F2F2;
  --tb-tx2:  #9A9A9A;
  --tb-bd:   #2A2A2E;

  --tb-sans: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --tb-cut:  polygon(8% 0, 100% 0, 92% 100%, 0 100%);

  background: var(--tb-bg);
  color: var(--tb-tx);
  font-family: var(--tb-sans);
  margin: 0;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.tb *, .tb *::before, .tb *::after { box-sizing: border-box; }
.tb a { color: inherit; text-decoration: none; }
.tb img { max-width: 100%; display: block; }
.tb h1, .tb h2, .tb h3 { font-family: var(--tb-sans); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; margin: 0; line-height: 1.05; }

.tb-wrap { width: 92%; max-width: 1600px; margin: 0 auto; }

.tb-kicker { display: inline-block; background: var(--acc); color: var(--main-primary-color-ink, #fff); text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; font-weight: 700; padding: 6px 16px; clip-path: var(--tb-cut); }
.tb-section__title { text-transform: uppercase; font-weight: 800; font-size: clamp(1.5rem, 3vw, 2rem); position: relative; padding-bottom: 12px; margin-bottom: 26px; }
.tb-section__title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 56px; height: 4px; background: var(--acc); }

/* ---------- HEADER ---------- */
.tb-header { background: var(--tb-sec); border-bottom: 2px solid var(--acc); }
.tb-header__inner { display: flex; align-items: center; gap: 18px; padding: 16px 0; position: relative; }
.tb-brand { margin-right: auto; }
.tb-brand__logo { max-height: 44px; width: auto; }
.tb-brand__name { font-style: italic; font-weight: 800; font-size: 1.4rem; letter-spacing: .02em; color: var(--tb-tx); }
.tb-nav { display: flex; align-items: center; gap: 24px; }
.tb-nav a { text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; font-weight: 600; color: var(--tb-tx2); transition: color .2s; }
.tb-nav a:hover { color: var(--tb-tx); }
.tb-cta { background: var(--acc); color: var(--main-primary-color-ink, #fff) !important; padding: 11px 26px; font-weight: 700; clip-path: var(--tb-cut); }
.tb-cta:hover { background: var(--btn-h); }
.tb-nav-toggle { display: none; background: none; border: 0; color: var(--tb-tx); font-size: 1.5rem; cursor: pointer; margin-left: auto; }

/* ---------- BOTÕES + CHIPS ---------- */
.tb-btn { display: inline-block; font-family: var(--tb-sans); text-transform: uppercase; letter-spacing: .08em; font-size: .76rem; font-weight: 700; padding: 13px 30px; cursor: pointer; border: 0; text-align: center; transition: background .2s, transform .15s; }
.tb-btn--accent { background: var(--btn); color: var(--button-color-ink, #fff); clip-path: var(--tb-cut); }
.tb-btn--accent:hover { background: var(--btn-h); }
.tb-btn--ghost { background: transparent; color: var(--tb-tx); border: 1px solid var(--tb-bd); }
.tb-btn--ghost:hover { border-color: var(--acc-fg); color: #fff; }
.tb-btn--block { display: block; width: 100%; }
.tb-btn--sm { padding: 9px 18px; }
.tb-chipspec { display: inline-block; border: 1px solid var(--tb-bd); color: var(--tb-tx2); font-size: .72rem; padding: 5px 10px; }

/* ---------- HERO ---------- */
.tb-hero { position: relative; background: var(--tb-bg); overflow: hidden; padding: 54px 0 44px; }
.tb-hero::before { content: ''; position: absolute; top: 0; right: 0; width: 45%; height: 100%; background: color-mix(in srgb, var(--acc) 22%, var(--tb-bg)); clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%); opacity: .55; pointer-events: none; }
.tb-hero__inner { position: relative; z-index: 1; }
.tb-hero__title { font-size: clamp(2rem, 5vw, 3.4rem); color: var(--tb-tx); max-width: 16ch; margin: 16px 0; }
.tb-hero__chips { display: flex; gap: 10px; flex-wrap: wrap; }
.tb-hero__chip { border: 1px solid var(--tb-bd); background: var(--tb-card); padding: 9px 16px; font-size: .8rem; font-weight: 600; }
.tb-hero__banner { margin-top: 26px; border: 1px solid var(--tb-bd); overflow: hidden; }
.tb-hero__banner img { width: 100%; height: auto; display: block; }
.tb-hero__banner.is-empty { aspect-ratio: 16 / 5; display: flex; align-items: center; justify-content: center; color: var(--tb-tx2); font-size: .8rem; }
/* Banner slider (componente): dots/hover das setas no acento vermelho da skin. */
.tb .bnr { --bnr-accent: var(--acc); }

/* ---------- SEÇÕES + GRID + CARD ---------- */
.tb-section { padding: 44px 0; }
.tb-section--sec { background: var(--tb-sec); }
.tb-empty { color: var(--tb-tx2); padding: 30px 0; }
.tb-center { text-align: center; margin-top: 28px; }
.tb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.tb-card { display: flex; flex-direction: column; background: var(--tb-card); border: 1px solid var(--tb-bd); overflow: hidden; transition: transform .2s, border-color .2s; }
.tb-card:hover { transform: scale(1.03); border-color: var(--acc-fg); z-index: 1; }
.tb-card__media { position: relative; aspect-ratio: 4 / 3; background: #0e0e10; overflow: hidden; }
.tb-card__media img { width: 100%; height: 100%; object-fit: cover; }
.tb-card__tag { position: absolute; top: 0; left: 0; background: var(--acc); color: var(--main-primary-color-ink, #fff); text-transform: uppercase; letter-spacing: .08em; font-size: .64rem; font-weight: 700; padding: 5px 16px 5px 10px; clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); }
.tb-card__body { padding: 15px 16px 16px; display: flex; flex-direction: column; gap: 5px; }
.tb-card__name { text-transform: uppercase; font-weight: 700; font-size: 1.02rem; color: var(--tb-tx); }
.tb-card__ver { color: var(--tb-tx2); font-size: .82rem; }
.tb-card__specs { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.tb-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.tb-card__price { font-weight: 800; font-size: 1.2rem; color: var(--acc-fg); }
.tb-card__cta { background: var(--acc); color: var(--main-primary-color-ink, #fff); text-transform: uppercase; font-size: .68rem; font-weight: 700; padding: 8px 18px; clip-path: var(--tb-cut); }

/* ---------- ESTOQUE: filtros + rows ---------- */
.tb-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 22px; }
.tb-filters input[type=text], .tb-filters select { background: var(--tb-card); color: var(--tb-tx); border: 1px solid var(--tb-bd); padding: 10px 12px; font-family: var(--tb-sans); font-size: .82rem; }
.tb-filters input[type=text] { flex: 1 1 200px; }
.tb-filters select:focus, .tb-filters input:focus { outline: none; border-color: var(--acc-fg); }
.tb-stock__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.tb-stock__count { color: var(--tb-tx2); font-size: .84rem; text-transform: uppercase; letter-spacing: .04em; }
.tb-viewtoggle { display: inline-flex; border: 1px solid var(--tb-bd); overflow: hidden; }
.tb-viewtoggle__btn { background: transparent; border: 0; padding: 7px 10px; color: var(--tb-tx2); cursor: pointer; display: flex; }
.tb-viewtoggle__btn svg { fill: currentColor; }
.tb-viewtoggle__btn.is-active { background: var(--acc); color: var(--main-primary-color-ink, #fff); }
.tb-results[data-view="list"] .tb-grid { display: none; }
.tb-results[data-view="cards"] .tb-list { display: none; }
.tb-list { display: flex; flex-direction: column; gap: 10px; }
.tb-row { display: flex; gap: 16px; align-items: center; background: var(--tb-card); border: 1px solid var(--tb-bd); padding: 10px; transition: border-color .2s; }
.tb-row:hover { border-color: var(--acc-fg); }
.tb-row__media { flex: 0 0 180px; aspect-ratio: 4 / 3; overflow: hidden; background: #0e0e10; }
.tb-row__media img { width: 100%; height: 100%; object-fit: cover; }
.tb-row__body { flex: 1 1 auto; min-width: 0; }
.tb-row__name { text-transform: uppercase; font-weight: 700; font-size: 1.02rem; }
.tb-row__meta { color: var(--tb-tx2); font-size: .8rem; margin-top: 3px; }
.tb-row__price { font-weight: 800; font-size: 1.14rem; color: var(--acc-fg); margin-top: 6px; }
.tb-pager { display: flex; gap: 7px; justify-content: center; align-items: center; margin-top: 28px; }
.tb-pager__num, .tb-pager__nav { min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--tb-bd); color: var(--tb-tx2); font-size: .84rem; }
.tb-pager__num.is-current { background: var(--acc); color: var(--main-primary-color-ink, #fff); border-color: var(--acc-fg); }
.tb-pager__dots { color: var(--tb-tx2); padding: 0 4px; }

/* ---------- PÁGINA DO VEÍCULO ---------- */
.tb-veh { padding: 30px 0 46px; }
.tb-crumb { text-transform: uppercase; color: var(--tb-tx2); font-size: .74rem; letter-spacing: .05em; margin-bottom: 20px; }
.tb-crumb__cur { color: var(--acc-fg); }
.tb-veh__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; }
.tb-gallery__main { aspect-ratio: 4 / 3; background: #0e0e10; border: 1px solid var(--tb-bd); overflow: hidden; }
.tb-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.tb-gallery__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.tb-thumb { padding: 0; border: 2px solid var(--tb-bd); overflow: hidden; background: #0e0e10; aspect-ratio: 4 / 3; cursor: pointer; }
.tb-thumb.is-active { border-color: var(--acc-fg); }
.tb-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tb-veh__name { font-size: 2rem; color: var(--tb-tx); }
.tb-veh__ver { color: var(--tb-tx2); margin-top: 3px; }
.tb-veh__price { font-weight: 800; font-size: 2.1rem; color: var(--acc-fg); margin: 14px 0 18px; }
.tb-specs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.tb-specs__chip { border: 1px solid var(--tb-bd); padding: 8px 14px; font-size: .82rem; }
.tb-specs__k { color: var(--tb-tx2); }
.tb-specs__v { color: var(--tb-tx); font-weight: 700; }
.tb-cta-wa { display: flex; align-items: center; justify-content: center; gap: 9px; background: var(--btn); color: var(--button-color-ink, #fff); text-transform: uppercase; letter-spacing: .08em; font-size: .82rem; font-weight: 700; padding: 15px; margin-bottom: 12px; clip-path: var(--tb-cut); }
.tb-cta-wa i { font-style: normal; display: inline-block; animation: tb-swing 2.2s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes tb-swing { 0%,60%,100% { transform: rotate(0); } 70% { transform: rotate(14deg); } 80% { transform: rotate(-10deg); } 90% { transform: rotate(6deg); } }
.tb-prose { color: var(--tb-tx2); }
.tb-veh__obs { margin-top: 28px; }
.tb-veh__obs h2 { font-size: 1.3rem; margin-bottom: 10px; }

/* ---------- FORMULÁRIOS ---------- */
.tb-form { background: var(--tb-card); border: 1px solid var(--tb-bd); padding: 24px; }
.tb-field { margin-bottom: 15px; }
.tb-field label { display: block; text-transform: uppercase; letter-spacing: .06em; font-size: .68rem; color: var(--tb-tx2); margin-bottom: 6px; }
.tb-field input, .tb-field select, .tb-field textarea { width: 100%; background: var(--tb-bg); color: var(--tb-tx); border: 1px solid var(--tb-bd); padding: 11px 12px; font-family: var(--tb-sans); font-size: .9rem; }
.tb-field input:focus, .tb-field select:focus, .tb-field textarea:focus { outline: none; border-color: var(--acc-fg); }
.tb-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tb-radios { display: flex; flex-wrap: wrap; gap: 14px; }
.tb-radio { display: inline-flex; align-items: center; gap: 6px; color: var(--tb-tx2); font-size: .88rem; }
.tb-reg__section { margin-bottom: 22px; }
.tb-reg__section-title { text-transform: uppercase; font-weight: 700; color: var(--acc-fg); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--tb-bd); }
.tb-reg__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tb-field--full { grid-column: 1 / -1; }
.tb-alert { padding: 12px 14px; margin-bottom: 16px; font-size: .9rem; border: 1px solid; }
.tb-alert--ok { background: color-mix(in srgb, #2e7d5b 22%, var(--tb-card)); border-color: #2e7d5b; color: #d9f2e6; }
.tb-alert--err { background: color-mix(in srgb, #a13b3b 22%, var(--tb-card)); border-color: #a13b3b; color: #f5dcdc; }
.tb-flash { background: color-mix(in srgb, #a13b3b 22%, var(--tb-card)); border: 1px solid #a13b3b; color: #f5dcdc; padding: 10px 14px; margin: 16px 0; }

/* ---------- ABOUT / CONTATO / FAQ ---------- */
.tb-about, .tb-contact, .tb-reg, .tb-faq { padding: 40px 0 48px; }
.tb-about__title, .tb-contact__title, .tb-reg__title, .tb-faq__title { font-size: clamp(1.8rem, 3.4vw, 2.6rem); color: var(--tb-tx); margin-bottom: 18px; }
.tb-about__text { color: var(--tb-tx2); max-width: 68ch; margin-bottom: 24px; }
.tb-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tb-info-card { background: var(--tb-card); border: 1px solid var(--tb-bd); padding: 20px; }
.tb-info-card__lines { color: var(--tb-tx2); font-size: .92rem; line-height: 1.9; margin: 8px 0 14px; }
.tb-info-card__lines a:hover { color: var(--acc-fg); }
.tb-faq__wrap { max-width: 860px; }
.tb-faq__list { display: flex; flex-direction: column; gap: 8px; }
.tb-faq__item { background: var(--tb-card); border: 1px solid var(--tb-bd); padding: 2px 18px; }
.tb-faq__q { text-transform: uppercase; font-weight: 700; font-size: .96rem; color: var(--tb-tx); padding: 14px 0; cursor: pointer; list-style: none; }
.tb-faq__q::-webkit-details-marker { display: none; }
.tb-faq__item[open] .tb-faq__q { color: var(--acc-fg); }
.tb-faq__a { color: var(--tb-tx2); padding: 0 0 16px; }
/* Título da seção (tema) — só existe quando o cliente agrupa as perguntas. */
.tb-faq__cat { text-transform: uppercase; font-weight: 800; font-size: 1.05rem; letter-spacing: .04em; color: var(--tb-tx); margin: 24px 0 4px; padding-left: 10px; border-left: 4px solid var(--acc); }
.tb-faq__cat:first-child { margin-top: 0; }

/* ---------- FOOTER ---------- */
.tb-footer { background: var(--tb-foot); border-top: 2px solid var(--acc); margin-top: 20px; }
.tb-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 28px; padding: 40px 0 26px; }
.tb-footer__brand { font-style: italic; font-weight: 800; font-size: 1.3rem; color: var(--tb-tx); margin-bottom: 10px; }
.tb-footer__desc { color: var(--tb-tx2); font-size: .86rem; max-width: 42ch; }
.tb-footer__label { text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; color: var(--acc-fg); margin-bottom: 12px; font-weight: 700; }
.tb-footer__lines { color: var(--tb-tx2); font-size: .88rem; line-height: 1.9; }
.tb-footer__lines a:hover { color: var(--acc-fg); }
.tb-footer__social { display: flex; gap: 8px; }
.tb-footer__social .icon { width: 38px; height: 38px; background: var(--tb-card); border: 1px solid var(--tb-bd); display: flex; align-items: center; justify-content: center; font-size: 0; color: var(--tb-tx2); background-size: 18px 18px; background-repeat: no-repeat; background-position: center; clip-path: var(--tb-cut); }
.tb-footer__social .icon:hover { background-color: var(--acc-fg); }
.tb-footer__bar { border-top: 1px solid var(--tb-bd); padding: 16px 0; }
.tb-footer__bar .tb-wrap { color: var(--tb-tx2); font-size: .76rem; text-align: center; text-transform: uppercase; letter-spacing: .06em; }

/* ---------- RESPONSIVO (header não quebra em ~490–540px: hamburger cedo) ---------- */
@media (max-width: 900px) {
  .tb-nav-toggle { display: block; }
  .tb-nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 2px; margin-top: 10px; }
  .tb-nav.is-open { display: flex; }
  .tb-nav a { padding: 11px 0; border-bottom: 1px solid var(--tb-bd); }
  .tb-cta { clip-path: none; text-align: center; margin-top: 6px; }
  .tb-veh__grid { grid-template-columns: 1fr; }
  .tb-footer__grid { grid-template-columns: 1fr; gap: 22px; }
  .tb-grid-2, .tb-field-row, .tb-reg__fields { grid-template-columns: 1fr; }
  .tb-hero::before { width: 100%; opacity: .28; }
  .tb-row { flex-direction: column; align-items: stretch; }
  .tb-row__media { flex-basis: auto; }
}

/* Galeria (componente gallery_slider): a Turbo usa cantos RETOS (identidade agressiva/diagonal). */
.tb .gsl__viewport,
.tb .gsl__thumb,
.tb .gsl__zoom,
.tb .gsl-lb__fig { border-radius: 0; }

/* ============================================================================
 * ⚠️ BOTÃO QUE É <a> PERDE A COR DO TEXTO — o reset `.tb a { color: inherit }` (0-1-1:
 * classe + tipo) VENCE as regras de botão (0-1-0). O sintoma é contraste ~1,7:1 no CTA
 * (texto do canvas sobre o fundo do botão) e o CSS "diz" a cor certa algumas linhas acima —
 * marcador de HTML não vê contraste; só a cor COMPUTADA no navegador denuncia.
 * Achado ao auditar a classic (27/08); vale para as quatro skins de layout próprio.
 * ==========================================================================*/
.tb a.tb-btn--accent { color: var(--button-color-ink, #fff); }
.tb a.tb-btn--ghost { color: var(--tb-tx); }
.tb a.tb-btn--ghost:hover { color: #ffffff; }
.tb a.tb-cta-wa { color: var(--button-color-ink, #fff); }

/* ─── Auditoria do item 11 (2026-08-28): o que a skin oferecia e não desenhava ─────────── */

/* ⚠️ `.icon__<rede>` mora no `index.css`, que esta skin NÃO carrega. O `.icon` daqui já tinha
   `font-size:0` (some a palavra) mas nenhuma imagem — os links de rede social do cliente eram
   CÍRCULOS VAZIOS: clicáveis, invisíveis. */
.tb-footer__social .icon__instagram { background-image: url(../img/icons/instagram-color.svg); }
.tb-footer__social .icon__facebook  { background-image: url(../img/icons/facebook-color.svg); }
.tb-footer__social .icon__youtube   { background-image: url(../img/icons/youtube-color.svg); }
.tb-footer__social .icon__tiktok    { background-image: url(../img/icons/tiktok-white.svg); }

/* Logo da marca no card/linha (`show_card_brand_logo`, opt-out do cliente). */
.tb-card__brand,
.tb-row__brand { height: 20px; width: auto; opacity: .9; flex: 0 0 auto; }
.tb-card__specs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.tb-row__meta { display: flex; align-items: center; gap: 10px; }

/* Badge da carroceria/tipo também na visão LISTA (na de cards já existia). */
.tb-row__media { position: relative; }
.tb-row__tag {
    position: absolute; top: 0; left: 0; background: var(--acc); color: var(--main-primary-color-ink, #fff);
    text-transform: uppercase; letter-spacing: .08em; font-size: .58rem; font-weight: 700;
    padding: 4px 12px 4px 8px; clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%);
}

/* Card da página do Facebook (rodapé e contato). */
.tb-footer__fb, .tb-fb-card { margin: 12px 0; max-width: 100%; overflow: hidden; }