/**
 * Ricardo Bicicletas — estilos do site.
 *
 * Todo valor vem de token declarado em colors_and_type.css. Nada hardcoded.
 * Breakpoints: 600px (mobile), 768px (tablet), 1024px (desktop).
 */

/* ==========================================================================
   1. Estrutura
   ========================================================================== */

.wt-hero,
.wt-section,
.wt-beneficios,
.wt-footer { width: 100%; }

.wt-main { display: block; }

.wt-container {
  width: 100%;
  max-width: var(--wt-container);
  margin-inline: auto;
  padding-inline: var(--wt-container-pad);
}

.wt-section { padding-block: var(--wt-section-pad); }

/* Ritmo de fundo — Design System §4 (contraste estratégico) */
.wt-bikes,
.wt-cta,
.wt-triciclo,
.wt-quem-somos { background-color: var(--wt-superficie-secundaria); }

.wt-konnan,
.wt-diferenciais {
  background: var(--wt-gradiente-destaque);
  color: var(--wt-texto-invertido);
}

.wt-diferenciais .wt-card__texto { text-align: justify; }

.wt-skip-link {
  position: absolute;
  left: -9999px;
  top: var(--wt-space-2);
  z-index: 1000;
  padding: var(--wt-space-3) var(--wt-space-5);
  background: var(--wt-azul-institucional);
  color: var(--wt-texto-invertido);
  font-weight: var(--wt-peso-label);
  border-radius: var(--wt-radius-md);
  text-decoration: none;
}
.wt-skip-link:focus { left: var(--wt-space-4); }

/* ==========================================================================
   2. Cabeçalho de seção
   ========================================================================== */

.wt-section__head {
  max-width: 820px;
  margin: 0 auto var(--wt-space-16);
  text-align: center;
}

.wt-section__head--esquerda {
  margin-inline: 0;
  text-align: left;
}

.wt-section__head--invertido,
.wt-section__head--invertido h2,
.wt-section__head--invertido h3 { color: var(--wt-texto-invertido); }

.wt-label {
  margin: 0 0 var(--wt-space-3);
  font-family: var(--wt-font-corpo);
  font-size: var(--wt-fs-label);
  font-weight: var(--wt-peso-label);
  letter-spacing: var(--wt-ls-eyebrow);
  text-transform: uppercase;
  color: var(--wt-vermelho-tracao);
}

.wt-label--amarelo { color: var(--wt-amarelo-eletrico); }

.wt-section__lead {
  margin-top: var(--wt-space-5);
  font-size: var(--wt-fs-lead);
  line-height: var(--wt-lh-corpo);
  /* Leitura densa → Texto Primário (Design System §2). O Secundário
     (#6C757D) sobre a Superfície Secundária (#F8F9FA) dá 4.45:1 e não
     alcança o AA de 4.5:1. */
  color: var(--wt-texto-primario);
  text-align: justify;
}

.wt-section__head--invertido .wt-section__lead { color: rgba(255, 255, 255, .82); }

.wt-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--wt-space-2);
  margin: var(--wt-space-4) 0 0;
  padding: var(--wt-space-2) var(--wt-space-4);
  border-radius: var(--wt-radius-pill);
  background: var(--wt-amarelo-eletrico);
  color: var(--wt-texto-primario);
  font-size: var(--wt-fs-label);
  font-weight: 600;
  letter-spacing: var(--wt-ls-label);
  text-transform: uppercase;
}
.wt-badge__icone { width: 18px; height: 18px; }

/* ==========================================================================
   3. Ícones
   ========================================================================== */

.wt-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  display: block;
}

/* ==========================================================================
   4. Botões
   ========================================================================== */

.wt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wt-space-2);
  padding: 8px var(--wt-space-6);
  border: 2px solid transparent;
  border-radius: var(--wt-radius-pill);
  font-family: var(--wt-font-corpo);
  font-size: 15px;
  font-weight: var(--wt-peso-label);
  letter-spacing: var(--wt-ls-label);
  line-height: var(--wt-lh-compacta);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--wt-transicao),
              border-color var(--wt-transicao),
              color var(--wt-transicao),
              transform var(--wt-transicao);
}

.wt-btn .wt-icon,
.wt-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.wt-btn:hover { transform: translateY(-2px); }

.wt-btn--grande {
  padding: 8px var(--wt-space-8);
  font-size: 15px;
}

/* Vermelho Tração — motor de conversão (Design System §4) */
.wt-btn--primario {
  background: var(--wt-vermelho-tracao);
  border-color: var(--wt-vermelho-tracao);
  color: var(--wt-texto-invertido);
  box-shadow: var(--wt-shadow-md);
}
.wt-btn--primario:hover {
  background: var(--wt-hover-vermelho);
  border-color: var(--wt-hover-vermelho);
}

/* Ghost sobre fundo escuro */
.wt-btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, .55);
  color: var(--wt-texto-invertido);
}
.wt-btn--ghost:hover {
  background: rgba(255, 255, 255, .12);
  border-color: var(--wt-texto-invertido);
}

/* Ghost sobre fundo claro */
.wt-btn--ghost-escuro {
  background: transparent;
  border-color: var(--wt-borda-sutil);
  color: var(--wt-texto-primario);
}
.wt-btn--ghost-escuro:hover {
  background: var(--wt-superficie-secundaria);
  border-color: var(--wt-azul-institucional);
  color: var(--wt-azul-institucional);
}

/* Outline azul sobre fundo claro */
.wt-btn--outline {
  background: transparent;
  border-color: var(--wt-azul-institucional);
  color: var(--wt-azul-institucional);
}
.wt-btn--outline:hover {
  background: var(--wt-azul-institucional);
  color: var(--wt-texto-invertido);
}

/* Outline branco sobre fundo escuro */
.wt-btn--outline-claro {
  background: transparent;
  border-color: var(--wt-texto-invertido);
  color: var(--wt-texto-invertido);
}
.wt-btn--outline-claro:hover {
  background: var(--wt-texto-invertido);
  color: var(--wt-azul-institucional);
}

/* ==========================================================================
   5. Hero
   ========================================================================== */

.wt-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(760px, 100svh);
  padding-block: var(--wt-space-20) var(--wt-space-16);
  /* Fundo sólido por baixo das fotos: se uma imagem falhar, o texto
     continua legível sobre o azul da marca. */
  background: var(--wt-gradiente-destaque);
  color: var(--wt-texto-invertido);
  overflow: hidden;
  isolation: isolate;
}

/* --- Camada de fundo: fotos + overlays --- */

.wt-hero__fundo {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.wt-hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity .9s ease;
}
.wt-hero__slide.is-ativo { opacity: 1; }

.wt-hero__overlay,
.wt-hero__vinheta {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}
.wt-hero__overlay { background: var(--wt-hero-overlay); }
.wt-hero__vinheta { background: var(--wt-hero-vinheta); }

/* --- Conteúdo --- */

.wt-hero__inner { position: relative; }

.wt-hero__conteudo { max-width: 660px; }

.wt-hero__logo {
  width: 104px;
  height: 104px;
  margin-bottom: var(--wt-space-6);
  border-radius: var(--wt-radius-full);
  box-shadow: var(--wt-shadow-lg);
}

.wt-hero__titulo {
  color: var(--wt-texto-invertido);
  margin-bottom: var(--wt-space-5);
  text-wrap: balance;
  /* Reforço de legibilidade nos slides mais claros — os overlays já entregam
     AA; a sombra é a margem de segurança. */
  text-shadow: 0 2px 12px rgba(11, 36, 79, .45);
}

.wt-hero__descricao {
  font-size: var(--wt-fs-lead);
  color: rgba(255, 255, 255, .92);
  text-align: justify;
  text-shadow: 0 1px 8px rgba(11, 36, 79, .45);
}
.wt-hero__descricao p { margin-bottom: var(--wt-space-2); }

.wt-hero__aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--wt-space-3);
  margin: var(--wt-space-6) 0 0;
  padding: var(--wt-space-4) var(--wt-space-5);
  border-left: 3px solid var(--wt-amarelo-eletrico);
  border-radius: var(--wt-radius-md);
  background: rgba(11, 36, 79, .58);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  font-size: var(--wt-fs-small);
  color: var(--wt-texto-invertido);
}
.wt-hero__aviso-icone { color: var(--wt-amarelo-eletrico); }
.wt-hero__aviso strong { color: var(--wt-amarelo-eletrico); }

.wt-hero__acoes {
  /* Colunas iguais: o ghost acompanha a largura do botão de WhatsApp. */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  justify-content: start;
  width: fit-content;
  max-width: 100%;
  gap: var(--wt-space-3);
  margin-top: var(--wt-space-8);
}

/* Pontos do slideshow, ancorados ao pé do hero */
.wt-hero__controles {
  position: relative;
  margin-top: var(--wt-space-12);
}
.wt-hero__controles .wt-slideshow__pontos {
  justify-content: flex-start;
  margin: 0;
}

/* --- Slideshow --- */

.wt-slideshow { position: relative; }

.wt-slideshow__palco {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--wt-radius-xl);
  overflow: hidden;
  box-shadow: var(--wt-shadow-lg);
  background: var(--wt-fundo-destaque);
}

.wt-slideshow__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s ease;
}
.wt-slideshow__slide.is-ativo { opacity: 1; }

.wt-slideshow__pontos {
  display: flex;
  justify-content: center;
  gap: var(--wt-space-2);
  margin-top: var(--wt-space-4);
}

.wt-slideshow__ponto {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: var(--wt-radius-full);
  background: rgba(255, 255, 255, .35);
  cursor: pointer;
  transition: background-color var(--wt-transicao), transform var(--wt-transicao);
}
.wt-slideshow__ponto.is-ativo {
  background: var(--wt-amarelo-eletrico);
  transform: scale(1.3);
}

/* Variante em fundo claro (Quem Somos) */
.wt-slideshow--largo .wt-slideshow__palco { aspect-ratio: 21 / 9; }
.wt-slideshow--largo .wt-slideshow__ponto { background: var(--wt-borda-sutil); }
.wt-slideshow--largo .wt-slideshow__ponto.is-ativo { background: var(--wt-vermelho-tracao); }

@media (prefers-reduced-motion: reduce) {
  .wt-slideshow__slide,
  .wt-hero__slide { transition: none; }
  .wt-btn:hover { transform: none; }
}

/* ==========================================================================
   6. Seção CTA (Compre Agora)
   ========================================================================== */

.wt-cta { padding-block: var(--wt-space-10); }

.wt-cta__inner { text-align: center; }

.wt-cta__titulo {
  max-width: 760px;
  margin-inline: auto;
  font-style: italic;
  text-wrap: balance;
}

.wt-cta__lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--wt-space-4);
  margin: var(--wt-space-10) 0;
  list-style: none;
}

.wt-cta__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  width: 196px;
  gap: var(--wt-space-3);
  padding: var(--wt-space-4);
  border: 1px solid var(--wt-borda-sutil);
  border-radius: var(--wt-radius-lg);
  background: var(--wt-superficie-elevada);
  box-shadow: var(--wt-shadow-sm);
  font-size: var(--wt-fs-label);
  font-weight: 600;
  font-style: italic;
  letter-spacing: var(--wt-ls-label);
  color: var(--wt-texto-primario);
}
.wt-cta__icone { color: var(--wt-vermelho-tracao); }

.wt-cta .wt-btn { padding-block: 8px; }

/* ==========================================================================
   7. Depoimentos
   ========================================================================== */

/* CRÍTICO: nunca limitar a largura do widget — o Trustindex decide quantos
   cards mostra pela largura disponível (context.md §4.8). */
.wt-reviews__widget { width: 100%; }

.wt-reviews__carousel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wt-space-6);
}

.wt-reviews__card {
  padding: var(--wt-space-6);
  border: 1px solid var(--wt-borda-sutil);
  border-radius: var(--wt-radius-lg);
  background: var(--wt-superficie-elevada);
  box-shadow: var(--wt-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--wt-space-3);
}

.wt-reviews__card-head {
  display: flex;
  align-items: center;
  gap: var(--wt-space-3);
}

.wt-reviews__avatar {
  width: 42px;
  height: 42px;
  border-radius: var(--wt-radius-full);
  background: var(--wt-azul-institucional);
  color: var(--wt-texto-invertido);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
}

.wt-reviews__info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.wt-reviews__info strong {
  font-size: var(--wt-fs-small);
  color: var(--wt-texto-primario);
}

.wt-reviews__tempo {
  font-size: var(--wt-fs-micro);
  color: var(--wt-texto-secundario);
}

.wt-reviews__google-badge {
  color: #FBBC05;
  display: flex;
  align-items: center;
}

.wt-reviews__stars {
  color: #FBBC05;
  font-size: 1rem;
  letter-spacing: 2px;
}

.wt-reviews__card-texto {
  font-size: var(--wt-fs-small);
  line-height: var(--wt-lh-corpo);
  color: var(--wt-texto-primario);
}

.wt-reviews__cta {
  text-align: center;
  margin-top: var(--wt-space-8);
}

/* ==========================================================================
   8. Bloco de produto
   ========================================================================== */

.wt-bikes .wt-section__head,
.wt-scooters .wt-section__head { max-width: 100%; }

.wt-produto {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: var(--wt-space-8);
  align-items: start;
  padding: var(--wt-space-8);
  border: 1px solid var(--wt-borda-sutil);
  border-radius: var(--wt-radius-xl);
  background: var(--wt-superficie-elevada);
  box-shadow: var(--wt-shadow-md);
}

.wt-produto + .wt-produto { margin-top: var(--wt-space-16); }

.wt-produto--invertido { grid-template-columns: 1fr 420px; }
.wt-produto--invertido .wt-produto__midia { order: 2; }

.wt-produto__midia {
  position: sticky;
  top: var(--wt-space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: var(--wt-radius-lg);
  background: var(--wt-superficie-secundaria);
}
.wt-produto__midia img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: var(--wt-radius-md);
}

.wt-produto__corpo { min-width: 0; }

.wt-produto__titulo {
  margin-bottom: var(--wt-space-4);
  color: var(--wt-azul-institucional);
  text-transform: none;
}

.wt-produto__intro,
.wt-produto__linhas,
.wt-produto__fecho {
  margin-bottom: var(--wt-space-6);
  text-align: justify;
  color: var(--wt-texto-primario);
}
.wt-produto__intro { font-size: var(--wt-fs-lead); }

.wt-produto__sub {
  margin: var(--wt-space-8) 0 var(--wt-space-5);
  font-family: var(--wt-font-display);
  font-size: var(--wt-fs-h3);
  font-weight: var(--wt-peso-h3);
}

.wt-produto__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wt-space-3);
  margin-top: var(--wt-space-8);
}

/* --- Blocos de especificação --- */

.wt-specs {
  display: grid;
  gap: var(--wt-space-5);
  margin-bottom: var(--wt-space-8);
}

.wt-specs__bloco {
  padding: var(--wt-space-5);
  border: 1px solid var(--wt-borda-sutil);
  border-radius: var(--wt-radius-md);
  background: var(--wt-superficie-secundaria);
}

.wt-specs__titulo {
  margin-bottom: var(--wt-space-2);
  font-family: var(--wt-font-corpo);
  font-size: var(--wt-fs-label);
  font-weight: 600;
  letter-spacing: var(--wt-ls-eyebrow);
  text-transform: uppercase;
  color: var(--wt-azul-institucional);
}

/* Os itens vinham pontuados por traço na copy; o marcador agora é do CSS. */
.wt-specs__intro {
  margin-bottom: var(--wt-space-3);
  font-size: var(--wt-fs-small);
  font-weight: 600;
  line-height: var(--wt-lh-corpo);
  color: var(--wt-texto-primario);
}

.wt-specs__lista {
  display: grid;
  gap: var(--wt-space-2);
  margin: 0;
  padding-left: 1.15em;
  list-style: disc outside;
  font-size: var(--wt-fs-small);
  line-height: var(--wt-lh-corpo);
  color: var(--wt-texto-primario);
}

.wt-specs__lista li::marker { color: var(--wt-azul-institucional); }

/* --- "Seu conjunto oferece" --- */

.wt-conjunto__titulo {
  margin-bottom: var(--wt-space-4);
  font-family: var(--wt-font-display);
  font-size: var(--wt-fs-h4);
  font-weight: var(--wt-peso-h3);
}

.wt-conjunto {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wt-space-3) var(--wt-space-5);
  list-style: none;
}

.wt-conjunto__item {
  display: flex;
  align-items: center;
  gap: var(--wt-space-3);
  font-size: var(--wt-fs-small);
  color: var(--wt-texto-primario);
}
.wt-conjunto__icone {
  width: 20px;
  height: 20px;
  color: var(--wt-vermelho-tracao);
}

/* ==========================================================================
   9. Listas de destaque
   ========================================================================== */

.wt-destaques {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wt-space-4);
  margin-bottom: var(--wt-space-16);
  list-style: none;
}

.wt-destaques__item {
  padding: var(--wt-space-5) var(--wt-space-6);
  border-left: 3px solid var(--wt-amarelo-eletrico);
  border-radius: var(--wt-radius-md);
  background: rgba(255, 255, 255, .07);
  font-size: var(--wt-fs-small);
  line-height: var(--wt-lh-corpo);
  color: rgba(255, 255, 255, .85);
  text-align: justify;
}
.wt-destaques__item strong {
  display: inline;
  margin-right: var(--wt-space-1);
  color: var(--wt-texto-invertido);
}

.wt-destaques--icones .wt-destaques__item {
  display: flex;
  align-items: flex-start;
  gap: var(--wt-space-4);
}
.wt-destaques__icone { color: var(--wt-amarelo-eletrico); }

/* ==========================================================================
   10. Cards
   ========================================================================== */

.wt-cards {
  display: grid;
  gap: var(--wt-space-5);
  list-style: none;
}

.wt-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wt-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wt-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.wt-card {
  padding: var(--wt-space-6);
  border: 1px solid var(--wt-borda-sutil);
  border-radius: var(--wt-radius-lg);
  background: var(--wt-superficie-elevada);
  box-shadow: var(--wt-shadow-sm);
  text-align: center;
}

.wt-card--escuro {
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  box-shadow: none;
}

.wt-card--centro { text-align: center; }
.wt-card--centro .wt-card__icone { margin-inline: auto; display: block; }
.wt-card--centro .wt-card__texto { text-align: center; }
.wt-card--full { grid-column: 1 / -1; }

.wt-card__icone {
  width: 32px;
  height: 32px;
  margin-bottom: var(--wt-space-4);
  margin-inline: auto;
  display: block;
  color: var(--wt-amarelo-eletrico);
}
.wt-card:not(.wt-card--escuro) .wt-card__icone { color: var(--wt-vermelho-tracao); }

.wt-card__titulo {
  margin-bottom: var(--wt-space-2);
  font-family: var(--wt-font-display);
  font-size: var(--wt-fs-h4);
  font-weight: var(--wt-peso-h3);
  text-align: center;
}
.wt-card--escuro .wt-card__titulo { color: var(--wt-texto-invertido); }

.wt-card__texto {
  font-size: var(--wt-fs-small);
  line-height: var(--wt-lh-corpo);
  color: var(--wt-texto-primario);
  text-align: center;
}
.wt-card--escuro .wt-card__texto { color: rgba(255, 255, 255, .78); }

/* Cards da ficha do Mult 3 (/eletricas): o texto é longo demais para ficar
   centralizado como nos benefícios da Spark — justificado (context.md §4.6). */
.wt-mult3-blocos .wt-card__texto { text-align: justify; }

/* ==========================================================================
   11. Konnan
   ========================================================================== */

.wt-konnan__fotos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wt-space-6);
  margin-bottom: var(--wt-space-16);
}
.wt-konnan__fotos img {
  width: 100%;
  height: auto;
  padding: var(--wt-space-5);
  border-radius: var(--wt-radius-lg);
  background: var(--wt-superficie-elevada);
  object-fit: contain;
}

.wt-konnan__specs {
  margin-bottom: var(--wt-space-16);
  padding: var(--wt-space-6);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--wt-radius-lg);
}
.wt-konnan__specs-titulo {
  margin-bottom: var(--wt-space-3);
  font-size: var(--wt-fs-h4);
  color: var(--wt-amarelo-eletrico);
}
.wt-konnan__specs-texto {
  font-size: var(--wt-fs-small);
  color: rgba(255, 255, 255, .82);
  text-align: justify;
}

.wt-konnan__bloco {
  margin-bottom: var(--wt-space-16);
  padding: var(--wt-space-10);
  border-radius: var(--wt-radius-xl);
  background: rgba(255, 255, 255, .06);
}
.wt-konnan__bloco-titulo {
  display: flex;
  align-items: center;
  gap: var(--wt-space-3);
  margin-bottom: var(--wt-space-4);
  color: var(--wt-texto-invertido);
}
.wt-konnan__bloco-icone { color: var(--wt-amarelo-eletrico); }
.wt-konnan__bloco-texto {
  color: rgba(255, 255, 255, .85);
  text-align: justify;
}

.wt-konnan__sub {
  margin: 0 0 var(--wt-space-8);
  color: var(--wt-texto-invertido);
  text-align: center;
  text-wrap: balance;
}

.wt-konnan .wt-cards { margin-bottom: var(--wt-space-16); }

.wt-konnan__fecho { text-align: center; }
.wt-konnan__fecho-1 {
  font-size: var(--wt-fs-lead);
  font-weight: 600;
  color: var(--wt-texto-invertido);
}
.wt-konnan__fecho-2 {
  margin-bottom: var(--wt-space-8);
  color: rgba(255, 255, 255, .82);
}
.wt-konnan__btn-desc {
  max-width: 100%;
  margin: var(--wt-space-5) auto var(--wt-space-6);
  font-size: var(--wt-fs-small);
  color: rgba(255, 255, 255, .72);
}

/* ==========================================================================
   12. Triciclo Drift
   ========================================================================== */

.wt-drift {
  margin-top: var(--wt-section-pad);
  padding-block: var(--wt-section-pad);
  background: var(--wt-gradiente-destaque);
  color: var(--wt-texto-invertido);
}

.wt-drift .wt-section__head { max-width: 100%; }

.wt-drift__titulo {
  font-size: var(--wt-fs-h2);
  font-weight: var(--wt-peso-h2);
  color: var(--wt-texto-invertido);
  text-wrap: balance;
}

/* O logotipo é preto e vermelho sobre fundo claro; aqui o bloco é escuro,
   então a arte ganha uma placa branca em vez de sumir no fundo. */
.wt-drift__logo {
  width: 100%;
  max-width: 520px;
  height: auto;
  margin-inline: auto;
  padding: var(--wt-space-5) var(--wt-space-6);
  background: var(--wt-base-light);
  border-radius: var(--wt-radius-lg);
  box-shadow: var(--wt-shadow-md);
}

.wt-drift__foto {
  width: 100%;
  height: auto;
  margin-bottom: var(--wt-space-16);
  border-radius: var(--wt-radius-xl);
  background: var(--wt-superficie-elevada);
  padding: var(--wt-space-5);
}

.wt-drift__acoes {
  margin-top: var(--wt-space-16);
  text-align: center;
}

/* ==========================================================================
   13. Faixa de itens (Drift e Benefícios)
   ========================================================================== */

.wt-faixa {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--wt-space-4);
  list-style: none;
}

.wt-faixa--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.wt-faixa__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wt-space-2);
  padding: var(--wt-space-5) var(--wt-space-4);
  text-align: center;
}

.wt-faixa__item + .wt-faixa__item { border-left: 1px solid var(--wt-borda-sutil); }

.wt-drift .wt-faixa__item + .wt-faixa__item {
  border-left-color: rgba(255, 255, 255, .18);
}

.wt-faixa__icone {
  width: 52px;
  height: 52px;
  margin-bottom: var(--wt-space-3);
  color: var(--wt-amarelo-eletrico);
}

.wt-faixa__titulo {
  margin: 0;
  font-family: var(--wt-font-display);
  font-size: var(--wt-fs-h3);
  font-weight: var(--wt-peso-h1);
  letter-spacing: var(--wt-ls-label);
  text-transform: uppercase;
}
.wt-drift .wt-faixa__titulo { color: var(--wt-texto-invertido); }

.wt-faixa__texto {
  margin: 0;
  font-size: var(--wt-fs-small);
  line-height: var(--wt-lh-corpo);
  color: var(--wt-texto-secundario);
}
.wt-drift .wt-faixa__texto { color: rgba(255, 255, 255, .74); }

/* --- Benefícios: faixa estreita entre seções --- */

.wt-beneficios {
  padding-block: var(--wt-space-12);
  border-block: 1px solid var(--wt-borda-sutil);
  background: var(--wt-base-light);
}
.wt-beneficios .wt-faixa__icone { color: var(--wt-vermelho-tracao); }
.wt-beneficios .wt-faixa__titulo {
  font-size: var(--wt-fs-h3);
  font-weight: 700;
  text-transform: none;
}

/* ==========================================================================
   13.1 Peças de Reposição — duas colunas de itens ladeando a foto
   ========================================================================== */

.wt-pecas { background-color: var(--wt-superficie-secundaria); }

.wt-pecas__quadro {
  display: grid;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  grid-template-columns: max-content minmax(0, 456px) max-content;
  gap: var(--wt-space-8);
  align-items: center;
  justify-content: center;
  padding: var(--wt-space-10) var(--wt-space-8);
  background: var(--wt-superficie-elevada);
  border: 1px solid var(--wt-borda-sutil);
  border-radius: var(--wt-radius-xl);
  box-shadow: var(--wt-shadow-md);
}

.wt-pecas__lista {
  display: grid;
  gap: var(--wt-space-5);
  list-style: none;
}

.wt-pecas__item {
  display: flex;
  align-items: center;
  gap: var(--wt-space-3);
  font-family: var(--wt-font-display);
  font-size: var(--wt-fs-h4);
  font-weight: var(--wt-peso-h3);
  letter-spacing: var(--wt-ls-eyebrow);
  text-transform: uppercase;
  color: var(--wt-texto-primario);
}

/* A coluna da direita espelha a da esquerda, como no layout da copy. */
.wt-pecas__lista--direita .wt-pecas__item { flex-direction: row-reverse; }

.wt-pecas__marcador {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: var(--wt-radius-full);
  background: var(--wt-amarelo-eletrico);
}

.wt-pecas__midia { margin: 0; }
.wt-pecas__midia img { width: 100%; }

.wt-pecas__acoes {
  margin-top: var(--wt-space-10);
  text-align: center;
}

/* ==========================================================================
   14. Portfólio — carrossel automático (context.md §4.10)
   ========================================================================== */

.wt-marquee {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.wt-marquee__track {
  display: flex;
  width: max-content;
  gap: var(--wt-space-5);
  animation: wt-marquee 80s linear infinite;
}

.wt-marquee__item {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 1px solid var(--wt-borda-sutil);
  border-radius: var(--wt-radius-lg);
  overflow: hidden;
  background: var(--wt-superficie-secundaria);
}

.wt-marquee__item img {
  width: auto;
  height: 400px;
  object-fit: contain;
  border-radius: var(--wt-radius-lg);
  display: block;
}

@keyframes wt-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- Grid 3x2 de Vídeos Verticais (9:16) --- */

.wt-portfolio__videos {
  margin-top: var(--wt-space-16);
}

.wt-videos-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wt-space-6);
  justify-items: center;
}

.wt-video-card {
  width: 100%;
  max-width: 320px;
}

.wt-video-btn {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  padding: 0;
  border: 0;
  border-radius: var(--wt-radius-xl);
  overflow: hidden;
  background: var(--wt-fundo-destaque);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--wt-shadow-md);
  transition: transform var(--wt-transicao), box-shadow var(--wt-transicao);
}

.wt-video-btn:hover {
  transform: translateY(-4px);
  box-shadow: var(--wt-shadow-lg);
}

.wt-video-btn img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wt-video-play {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--wt-radius-full);
  background: var(--wt-vermelho-tracao);
  color: var(--wt-texto-invertido);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
  transition: transform var(--wt-transicao), background-color var(--wt-transicao);
}

.wt-video-btn:hover .wt-video-play {
  transform: scale(1.15);
  background: var(--wt-hover-vermelho);
}

.wt-video-play .wt-icon {
  width: 24px;
  height: 24px;
  margin-left: 2px;
}

.wt-video-placeholder {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: var(--wt-radius-xl);
  background: var(--wt-fundo-destaque);
  border: 1px dashed rgba(255, 255, 255, .2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--wt-space-3);
  color: rgba(255, 255, 255, .6);
  text-align: center;
  padding: var(--wt-space-4);
  box-shadow: var(--wt-shadow-sm);
}

.wt-video-placeholder__label {
  font-size: var(--wt-fs-label);
  font-weight: 600;
  color: var(--wt-texto-invertido);
}

.wt-video-placeholder__sub {
  font-size: var(--wt-fs-small);
  color: rgba(255, 255, 255, .5);
}

/* ==========================================================================
   15. Quem Somos
   ========================================================================== */

.wt-quem-somos__grid-2x2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wt-space-16) var(--wt-space-12);
  align-items: center;
}

.wt-quem-somos__bloco { width: 100%; }

.wt-quem-somos__bloco--conteudo .wt-section__head {
  margin-bottom: var(--wt-space-6);
}

.wt-quem-somos__subtitulo {
  margin-top: var(--wt-space-4);
  font-size: var(--wt-fs-lead);
  font-weight: 500;
  color: var(--wt-azul-institucional);
}

.wt-quem-somos__texto {
  margin-bottom: var(--wt-space-6);
  color: var(--wt-texto-primario);
}
.wt-quem-somos__texto p { text-align: justify; }

.wt-quem-somos__quadro {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--wt-radius-xl);
  overflow: hidden;
  box-shadow: var(--wt-shadow-lg);
  background: var(--wt-superficie-secundaria);
}

.wt-quem-somos__quadro img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   16. Localização
   ========================================================================== */

.wt-local .wt-section__lead { text-align: center; }

.wt-local__mapa {
  position: relative;
  width: 100%;
  height: 320px;
  margin-block: var(--wt-space-6);
  overflow: hidden;
}
.wt-local__mapa iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.wt-local__acoes {
  margin-top: var(--wt-space-8);
  text-align: center;
}

.wt-local__dados {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--wt-space-6) var(--wt-space-12);
  margin-top: var(--wt-space-10);
  list-style: none;
}

.wt-local__dado {
  display: flex;
  align-items: flex-start;
  gap: var(--wt-space-3);
  max-width: 420px;
  font-size: var(--wt-fs-small);
  color: var(--wt-texto-secundario);
}
.wt-local__icone { color: var(--wt-vermelho-tracao); }
.wt-local__dado a {
  color: inherit;
  text-decoration: none;
}
.wt-local__dado a:hover {
  color: var(--wt-azul-institucional);
  text-decoration: underline;
}

/* ==========================================================================
   17. Rodapé (context.md §4.4)
   ========================================================================== */

.wt-footer {
  background: var(--wt-fundo-destaque);
  color: var(--wt-texto-invertido);
}

.wt-footer__grid {
  display: grid;
  /* Col 2 mais larga: o endereço tem que caber em duas linhas. */
  grid-template-columns: 1fr 1.35fr 1.15fr 0.6fr;
  gap: var(--wt-space-10);
  padding-block: var(--wt-space-10);
}

.wt-footer__logo,
.wt-footer .custom-logo {
  width: 168px;
  height: 168px;
  border-radius: var(--wt-radius-full);
  box-shadow: var(--wt-shadow-lg);
}

/* Aviso miúdo embaixo da marca, na primeira coluna. */
.wt-footer__disclaimer {
  margin-top: var(--wt-space-6);
  font-size: var(--wt-fs-micro);
  line-height: var(--wt-lh-corpo);
  color: rgba(255, 255, 255, .62);
}

.wt-footer__titulo {
  margin-bottom: var(--wt-space-4);
  font-family: var(--wt-font-corpo);
  font-size: var(--wt-fs-label);
  font-weight: 600;
  letter-spacing: var(--wt-ls-eyebrow);
  text-transform: uppercase;
  color: var(--wt-amarelo-eletrico);
}
.wt-footer__texto--espaco { margin-top: var(--wt-space-5); }

.wt-footer__texto {
  font-size: var(--wt-fs-small);
  line-height: var(--wt-lh-corpo);
  color: rgba(255, 255, 255, .78);
}
.wt-footer__texto a {
  color: inherit;
  text-decoration: none;
}
.wt-footer__texto a:hover {
  color: var(--wt-texto-invertido);
  text-decoration: underline;
}

.wt-footer__list {
  display: grid;
  gap: var(--wt-space-4);
  list-style: none;
}

.wt-footer__link {
  display: flex;
  align-items: center;
  gap: var(--wt-space-3);
  font-size: var(--wt-fs-small);
  color: rgba(255, 255, 255, .78);
  text-decoration: none;
  transition: color var(--wt-transicao);
}
.wt-footer__link:hover { color: var(--wt-amarelo-eletrico); }
.wt-footer__icone { width: 20px; height: 20px; }

.wt-footer__social {
  display: flex;
  gap: var(--wt-space-3);
  list-style: none;
}

.wt-footer__pilula {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--wt-radius-pill);
  color: var(--wt-texto-invertido);
  transition: background-color var(--wt-transicao), border-color var(--wt-transicao);
}
.wt-footer__pilula:hover {
  background: var(--wt-vermelho-tracao);
  border-color: var(--wt-vermelho-tracao);
}

.wt-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .14); }

.wt-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--wt-space-4);
  padding-block: 12px;
}

.wt-footer__copy {
  margin: 0;
  font-size: var(--wt-fs-micro);
  color: rgba(255, 255, 255, .62);
}

.wt-footer__politica {
  font-size: var(--wt-fs-micro);
  color: rgba(255, 255, 255, .78);
  text-decoration: underline;
}
.wt-footer__politica:hover { color: var(--wt-amarelo-eletrico); }

.wt-footer__credit {
  margin: 0;
  padding-block: 8px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .45);
  font-size: var(--wt-fs-micro);
  text-align: center;
  color: rgba(255, 255, 255, .52);
}
.wt-footer__credit a {
  color: rgba(255, 255, 255, .78);
  text-decoration: none;
}
.wt-footer__credit a:hover {
  color: var(--wt-amarelo-eletrico);
  text-decoration: underline;
}

/* ==========================================================================
   18. Botão flutuante do WhatsApp (context.md §4.1)
   ========================================================================== */

.wt-whatsapp-float {
  position: fixed;
  bottom: var(--wt-space-6);
  right: var(--wt-space-6);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--wt-radius-full);
  background: var(--wt-whatsapp);
  color: var(--wt-texto-invertido);
  box-shadow: var(--wt-shadow-cta);
  z-index: 999;
  text-decoration: none;
  transition: transform var(--wt-transicao);
}
.wt-whatsapp-float:hover { transform: scale(1.1); }
.wt-whatsapp-float .wt-icon { width: 30px; height: 30px; }

/* ==========================================================================
   19. Política de Privacidade
   ========================================================================== */

.wt-legal {
  padding-block: var(--wt-space-10) var(--wt-section-pad);
  background: var(--wt-gradiente-destaque);
  color: var(--wt-texto-invertido);
}

.wt-legal__topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--wt-space-4);
  margin-bottom: var(--wt-space-16);
}

.wt-legal__logo {
  width: 72px;
  height: 72px;
  border-radius: var(--wt-radius-full);
}

.wt-legal__title {
  color: var(--wt-texto-invertido);
  text-wrap: balance;
}

.wt-legal__meta {
  margin-bottom: var(--wt-space-10);
  font-size: var(--wt-fs-small);
  text-align: center;
  color: rgba(255, 255, 255, .70);
}

.wt-legal__body {
  max-width: 860px;
  margin-inline: auto;
  padding: var(--wt-space-10);
  border-radius: var(--wt-radius-xl);
  background: rgba(255, 255, 255, .06);
}
.wt-legal__body p,
.wt-legal__body li {
  font-size: var(--wt-fs-small);
  line-height: var(--wt-lh-corpo);
  color: rgba(255, 255, 255, .82);
  text-align: justify;
}
.wt-legal__body h2 {
  margin: var(--wt-space-10) 0 var(--wt-space-4);
  padding-top: var(--wt-space-8);
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: var(--wt-fs-h3);
  color: var(--wt-amarelo-eletrico);
}
.wt-legal__body h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.wt-legal__body ul {
  margin: 0 0 var(--wt-space-4) var(--wt-space-6);
  padding-left: var(--wt-space-4);
  list-style: disc;
}
.wt-legal__body li { margin-bottom: var(--wt-space-2); }
.wt-legal__body strong { color: var(--wt-texto-invertido); }
.wt-legal__body a { color: var(--wt-amarelo-eletrico); }

.wt-legal__actions--bottom {
  margin-top: var(--wt-space-12);
  text-align: center;
}

/* ==========================================================================
   20. Home — ritmo de fundo das seções próprias
   (Design System §4 — contraste estratégico)
   ========================================================================== */

.wt-produtos,
.wt-promos,
.wt-contato { background-color: var(--wt-superficie-secundaria); }

.wt-oficina,
.wt-autorizado {
  background: var(--wt-gradiente-destaque);
  color: var(--wt-texto-invertido);
}

/* ==========================================================================
   21. Home — Produtos e Serviços (Seções 3 e 3.1)
   ========================================================================== */

/* Lead curto de uma linha: o justify global do .wt-section__lead o deixaria
   encostado à esquerda. */
.wt-produtos .wt-section__lead { text-align: center; }

.wt-produtos__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wt-space-6);
  list-style: none;
  margin-top: var(--wt-space-12);
}

.wt-produtos__item { display: flex; }

.wt-produtos__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wt-space-4);
  width: 100%;
  padding: var(--wt-space-8);
  background: var(--wt-superficie-elevada);
  border: 1px solid var(--wt-borda-sutil);
  border-radius: var(--wt-radius-lg);
  box-shadow: var(--wt-shadow-sm);
  text-decoration: none;
  transition: box-shadow var(--wt-transicao),
              border-color var(--wt-transicao),
              transform var(--wt-transicao);
}

.wt-produtos__link:hover {
  transform: translateY(-3px);
  border-color: var(--wt-vermelho-tracao);
  box-shadow: var(--wt-shadow-md);
}

.wt-produtos__icone {
  width: 40px;
  height: 40px;
  color: var(--wt-vermelho-tracao);
}

.wt-produtos__titulo {
  margin: 0;
  font-size: var(--wt-fs-h3);
  color: var(--wt-texto-primario);
  text-align: center;
}

.wt-btn--bloco { width: 100%; }

.wt-produtos__link:hover .wt-btn--primario {
  background: var(--wt-hover-vermelho);
  border-color: var(--wt-hover-vermelho);
}

/* --- Seção 3.1: Roupas / Peças e acessórios --- */

.wt-produtos__outros {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wt-space-6);
  list-style: none;
  margin-top: var(--wt-space-12);
}

.wt-outros__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wt-space-4);
  padding: var(--wt-space-8);
  background: var(--wt-superficie-elevada);
  border: 1px solid var(--wt-borda-sutil);
  border-radius: var(--wt-radius-lg);
  box-shadow: var(--wt-shadow-sm);
}

.wt-outros__icone {
  width: 32px;
  height: 32px;
  margin-inline: auto;
  color: var(--wt-vermelho-tracao);
}

.wt-outros__conteudo {
  width: 100%;
  flex: 1 1 auto;
}

.wt-outros__titulo {
  margin: 0 0 var(--wt-space-2);
  font-size: var(--wt-fs-h3);
  text-align: center;
}

.wt-outros__texto {
  margin: 0;
  color: var(--wt-texto-secundario);
  text-align: justify;
}

/* ==========================================================================
   22. Home — Oficina (Seção 4)
   ========================================================================== */

.wt-oficina__inner {
  display: grid;
  /* A foto ocupa 63% da largura da seção; a coluna de texto fica com o resto
     menos o gap, para o total fechar em 100%. */
  grid-template-columns: calc(37% - var(--wt-space-12)) 63%;
  gap: var(--wt-space-12);
  align-items: center;
}

.wt-oficina__titulo {
  margin: var(--wt-space-3) 0 var(--wt-space-4);
  color: var(--wt-texto-invertido);
}

.wt-oficina__texto {
  margin-bottom: var(--wt-space-8);
  font-size: var(--wt-fs-lead);
  color: rgba(255, 255, 255, .82);
  text-align: justify;
}

.wt-oficina__midia {
  position: relative;
  padding: var(--wt-space-2);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--wt-radius-xl);
}

.wt-oficina__midia img {
  width: 100%;
  border-radius: var(--wt-radius-lg);
}

.wt-oficina__selo {
  position: absolute;
  top: calc(var(--wt-space-6) * -1);
  right: var(--wt-space-4);
  width: 56px;
  height: 56px;
  padding: var(--wt-space-3);
  color: var(--wt-fundo-destaque);
  background: var(--wt-amarelo-eletrico);
  border-radius: var(--wt-radius-full);
  box-shadow: var(--wt-shadow-md);
}

/* ==========================================================================
   23. Home — Bicicletas Elétricas (Seção 5) e faixas de marca
   ========================================================================== */

.wt-marcas {
  margin-top: var(--wt-space-10);
  text-align: center;
}

.wt-marcas__label {
  margin-bottom: var(--wt-space-4);
  font-size: var(--wt-fs-label);
  font-weight: var(--wt-peso-label);
  letter-spacing: var(--wt-ls-eyebrow);
  text-transform: uppercase;
  color: var(--wt-texto-secundario);
}

.wt-marcas__lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--wt-space-3);
  list-style: none;
}

.wt-marcas__item {
  display: inline-flex;
  align-items: center;
  gap: var(--wt-space-2);
  padding: var(--wt-space-3) var(--wt-space-6);
  font-family: var(--wt-font-display);
  font-size: var(--wt-fs-h4);
  font-weight: var(--wt-peso-h2);
  letter-spacing: var(--wt-ls-eyebrow);
  text-transform: uppercase;
  color: var(--wt-azul-institucional);
  background: var(--wt-superficie-elevada);
  border: 1px solid var(--wt-borda-sutil);
  border-radius: var(--wt-radius-pill);
}

/* Marca com arte: a pílula vira moldura do logo. */
.wt-marcas__item--logo { padding: var(--wt-space-3) var(--wt-space-5); }

.wt-marcas__logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 132px;
  max-height: 36px;
  object-fit: contain;
}

/* Os logos têm preto na arte: no fundo escuro a pílula precisa clarear. */
.wt-marcas__item--escuro.wt-marcas__item--logo {
  background: var(--wt-superficie-elevada);
  border-color: transparent;
}
.wt-marcas__lista--escuro { margin-top: var(--wt-space-10); }

.wt-marcas__item--escuro {
  color: var(--wt-texto-invertido);
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .24);
}

.wt-marcas__icone {
  width: 18px;
  height: 18px;
  color: var(--wt-amarelo-eletrico);
}

.wt-marquee--wide .wt-marquee__track { animation-duration: 32s; }

/* Respiro entre a faixa de marcas e o carrossel de modelos. */
.wt-eletricas .wt-marquee { margin-top: var(--wt-space-12); }

/* Descrições em largura cheia, a pedido: o head padrão trava em 820px e o
   bloco Drift tinha um cap próprio. Os títulos seguem centralizados. */
.wt-eletricas .wt-section__head { max-width: none; }

.wt-eletricas__fecho {
  margin-top: var(--wt-space-12);
  text-align: center;
}

.wt-eletricas__frase {
  display: inline-flex;
  align-items: center;
  gap: var(--wt-space-3);
  margin-bottom: var(--wt-space-6);
  font-family: var(--wt-font-display);
  font-size: var(--wt-fs-h3);
  font-weight: var(--wt-peso-h2);
  color: var(--wt-texto-primario);
}

.wt-eletricas__frase-icone {
  width: 28px;
  height: 28px;
  color: var(--wt-vermelho-tracao);
}

.wt-eletricas__acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--wt-space-4);
}

/* ==========================================================================
   24. Home — Scooters, Triciclo e Drift (Seção 7)
   ========================================================================== */

.wt-bloco {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wt-space-12);
  align-items: center;
  padding-block: var(--wt-space-12);
  border-bottom: 1px solid var(--wt-borda-sutil);
}

.wt-bloco:last-child { border-bottom: 0; }

.wt-bloco--invertido .wt-bloco__texto { order: 2; }

.wt-bloco--full {
  grid-template-columns: 1fr;
  text-align: center;
}

.wt-bloco__desc {
  margin-block: var(--wt-space-5) var(--wt-space-8);
  color: var(--wt-texto-secundario);
  text-align: justify;
}

/* O título do bloco Drift é o próprio logotipo da linha. O <h2> continua no
   documento (a arte carrega o texto no alt), só perde o desenho de título. */
.wt-bloco__logo-titulo {
  margin: 0;
  line-height: 0;
}

.wt-bloco__logo-titulo img {
  width: 100%;
  max-width: 520px;
  height: auto;
  margin-inline: auto;
}

.wt-bloco__lineup {
  width: 100%;
  border-radius: var(--wt-radius-lg);
}

.wt-bloco__acoes { margin-top: var(--wt-space-8); }

/* No bloco largo o botão é uma linha do grid: o gap já separa da foto. */
.wt-bloco--full .wt-bloco__acoes { margin-top: 0; }

.wt-galeria {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wt-space-4);
  list-style: none;
}

.wt-galeria--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.wt-galeria__item {
  background: var(--wt-superficie-secundaria);
  border: 1px solid var(--wt-borda-sutil);
  border-radius: var(--wt-radius-lg);
  overflow: hidden;
}

.wt-galeria__item img {
  width: 100%;
  height: 170px;
  object-fit: contain;
  padding: var(--wt-space-2);
}

/* ==========================================================================
   25. Home — Promoções (Seção 8)
   ========================================================================== */

.wt-promos__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wt-space-6);
  list-style: none;
}

.wt-promos__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wt-space-3);
  padding: var(--wt-space-8);
  text-align: center;
  background: var(--wt-superficie-elevada);
  border: 1px solid var(--wt-borda-sutil);
  border-radius: var(--wt-radius-lg);
  box-shadow: var(--wt-shadow-sm);
}

.wt-promos__titulo { margin: 0; }

.wt-promos__marca {
  margin: 0;
  color: var(--wt-texto-secundario);
  font-size: var(--wt-fs-small);
}

.wt-promos__preco {
  margin: 0;
  font-family: var(--wt-font-display);
  font-size: var(--wt-fs-h3);
  font-weight: var(--wt-peso-h1);
  color: var(--wt-vermelho-tracao);
}

.wt-promos__obs {
  margin: 0;
  font-size: var(--wt-fs-micro);
  color: var(--wt-texto-secundario);
}

.wt-promos__card .wt-btn { margin-top: auto; }

.wt-promos__regua {
  height: 0;
  margin-block: var(--wt-space-12);
  border: 0;
  border-top: 1px solid var(--wt-borda-sutil);
}

.wt-promos__fecho { text-align: center; }

.wt-promos__destaque {
  margin-bottom: var(--wt-space-4);
  font-family: var(--wt-font-display);
  font-size: var(--wt-fs-h2);
  font-weight: var(--wt-peso-h2);
  color: var(--wt-azul-institucional);
}

.wt-promos__parcelamento {
  display: inline-flex;
  align-items: center;
  gap: var(--wt-space-2);
  margin-bottom: var(--wt-space-3);
  font-size: var(--wt-fs-lead);
  font-weight: var(--wt-peso-label);
}

.wt-promos__icone {
  width: 20px;
  height: 20px;
  color: var(--wt-vermelho-tracao);
}

.wt-promos__obs-geral {
  margin: 0;
  font-size: var(--wt-fs-small);
  /* Sobre a superfície secundária o cinza de apoio fica em 4.4:1 — abaixo do
     AA. Esta linha usa o texto primário para não perder contraste. */
  color: var(--wt-texto-primario);
}

/* ==========================================================================
   26. Home — Contato (Seção 12)
   ========================================================================== */

/* Lead curto: mesmo caso do .wt-produtos — o justify global o deixaria
   encostado à esquerda. */
.wt-contato .wt-section__lead { text-align: center; }

.wt-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wt-space-5);
  max-width: 760px;
  margin-inline: auto;
}

.wt-form__campo {
  display: flex;
  flex-direction: column;
  gap: var(--wt-space-2);
  margin: 0;
}

.wt-form__campo--largo,
.wt-form__acoes { grid-column: 1 / -1; }

.wt-form__label {
  font-size: var(--wt-fs-label);
  font-weight: var(--wt-peso-label);
  /* Mesmo motivo do .wt-section__lead: o Secundário sobre a Superfície
     Secundária não alcança o AA de 4.5:1. */
  color: var(--wt-texto-primario);
}

.wt-form__input {
  padding: var(--wt-space-3) var(--wt-space-4);
  font-family: var(--wt-font-corpo);
  font-size: var(--wt-fs-corpo);
  color: var(--wt-texto-primario);
  background: var(--wt-superficie-elevada);
  border: 1px solid var(--wt-borda-sutil);
  border-radius: var(--wt-radius-md);
  transition: border-color var(--wt-transicao);
}

.wt-form__input:focus {
  border-color: var(--wt-azul-institucional);
}

.wt-form__input:focus-visible {
  outline: var(--wt-foco-largura) solid var(--wt-foco-cor);
  outline-offset: var(--wt-foco-offset);
}

.wt-form__textarea {
  min-height: 140px;
  resize: vertical;
}

.wt-form__acoes {
  margin: 0;
  text-align: center;
}

/* Armadilha de spam: fora da tela, mas presente no DOM para o robô preencher. */
.wt-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.wt-aviso {
  display: flex;
  align-items: center;
  gap: var(--wt-space-3);
  max-width: 760px;
  margin: 0 auto var(--wt-space-8);
  padding: var(--wt-space-4) var(--wt-space-5);
  background: var(--wt-superficie-elevada);
  border: 1px solid var(--wt-borda-sutil);
  border-left-width: 4px;
  border-radius: var(--wt-radius-md);
}

.wt-aviso .wt-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.wt-aviso--ok {
  border-left-color: var(--wt-whatsapp);
}
.wt-aviso--ok .wt-icon { color: var(--wt-whatsapp); }

.wt-aviso--erro {
  border-left-color: var(--wt-vermelho-tracao);
}
.wt-aviso--erro .wt-icon { color: var(--wt-vermelho-tracao); }

/* ==========================================================================
   27. Responsivo — 1024px
   ========================================================================== */

@media (max-width: 1024px) {

  .wt-hero { min-height: min(640px, 100svh); }
  .wt-hero__conteudo { max-width: 100%; }

  .wt-produto,
  .wt-produto--invertido {
    grid-template-columns: 1fr;
    gap: var(--wt-space-8);
    padding: var(--wt-space-8);
  }
  .wt-produto--invertido .wt-produto__midia { order: 0; }
  .wt-produto__midia {
    position: static;
    max-width: 460px;
    margin-inline: auto;
  }

  .wt-quem-somos__grid-2x2 {
    grid-template-columns: 1fr;
    gap: var(--wt-space-8);
  }

  /* Empilhado, o cabeçalho do Quem Somos acompanha o resto e vai ao centro. */
  .wt-quem-somos .wt-section__head--esquerda { text-align: center; }

  /* Empilhado, a ordem do DOM (texto, foto, foto, texto+botão) juntaria as
     duas fotos no meio. O último bloco vira `display: contents` para que o
     texto e o botão possam ser ordenados separadamente, fechando em
     texto-foto-texto-foto-botão. */
  .wt-quem-somos__grid-2x2 > .wt-quem-somos__bloco--conteudo:last-child {
    display: contents;
  }
  .wt-quem-somos__grid-2x2 > .wt-quem-somos__bloco--conteudo:last-child > .wt-quem-somos__texto {
    order: 1;
    margin-bottom: 0;
  }
  .wt-quem-somos__bloco--interna { order: 2; }
  .wt-quem-somos__grid-2x2 > .wt-quem-somos__bloco--conteudo:last-child > .wt-btn {
    order: 3;
    justify-self: center;
  }

  .wt-videos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wt-destaques,
  .wt-cards--3,
  .wt-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .wt-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wt-space-10);
  }
}

/* ==========================================================================
   28. Responsivo — 768px
   ========================================================================== */

@media (max-width: 768px) {

  /* Empilhado, os títulos do produto e dos blocos de specs vão ao centro. */
  .wt-produto__titulo,
  .wt-specs__titulo { text-align: center; }

  /* Peças: a foto vai para o topo, em toda a largura, e as duas colunas de
     itens ficam lado a lado embaixo — ambas alinhadas à esquerda. */
  .wt-pecas__quadro {
    width: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wt-space-6);
    padding: var(--wt-space-8) var(--wt-space-6);
  }
  .wt-pecas__midia {
    grid-column: 1 / -1;
    order: -1;
  }
  .wt-pecas__lista--direita .wt-pecas__item { flex-direction: row; }

  .wt-reviews__carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--wt-space-4);
    padding-bottom: var(--wt-space-3);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .wt-reviews__carousel::-webkit-scrollbar {
    display: none;
  }
  .wt-reviews__card {
    flex: 0 0 85%;
    min-width: 85%;
    scroll-snap-align: center;
  }

  .wt-faixa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wt-faixa__item + .wt-faixa__item { border-left: 0; }
  .wt-faixa__item:nth-child(even) { border-left: 1px solid var(--wt-borda-sutil); }
  .wt-drift .wt-faixa__item:nth-child(even) { border-left-color: rgba(255, 255, 255, .18); }

  .wt-konnan__fotos { gap: var(--wt-space-4); }

  .wt-konnan__bloco { padding: var(--wt-space-6); }

  .wt-legal__body { padding: var(--wt-space-6); }

  /* Mobile ~20% mais rápido que o desktop (context.md §4.10) */
  .wt-marquee__track { animation-duration: 64s; }
  .wt-marquee__item img { height: 220px; }
}

/* ==========================================================================
   29. Responsivo — 600px
   ========================================================================== */

@media (max-width: 600px) {

  .wt-container { --wt-container-pad: var(--wt-space-5); }

  .wt-cta { padding-block: var(--wt-space-8); }

  .wt-hero {
    min-height: 0;
    padding-block: var(--wt-space-12);
  }
  /* No celular eles empilham, mas seguem com a mesma largura. */
  .wt-hero__acoes { grid-auto-flow: row; }
  .wt-hero__logo { width: 84px; height: 84px; }
  .wt-hero__controles { margin-top: var(--wt-space-10); }
  .wt-hero__controles .wt-slideshow__pontos { justify-content: center; }

  .wt-slideshow__palco { aspect-ratio: 4 / 3; }
  .wt-slideshow--largo .wt-slideshow__palco { aspect-ratio: 16 / 9; }

  .wt-produto { padding: var(--wt-space-5); }
  .wt-produto__acoes .wt-btn { flex: 1 1 100%; }

  .wt-conjunto { grid-template-columns: 1fr; }

  .wt-destaques,
  .wt-cards--2,
  .wt-cards--3,
  .wt-cards--4 { grid-template-columns: 1fr; }

  .wt-videos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wt-space-3);
  }
  .wt-portfolio__videos { padding-inline: 0; }

  .wt-konnan__fotos { grid-template-columns: 1fr; }

  .wt-faixa { grid-template-columns: 1fr; }
  .wt-faixa__item + .wt-faixa__item,
  .wt-faixa__item:nth-child(even) {
    border-left: 0;
    border-top: 1px solid var(--wt-borda-sutil);
  }
  .wt-drift .wt-faixa__item + .wt-faixa__item {
    border-top-color: rgba(255, 255, 255, .18);
  }

  .wt-local__dados { flex-direction: column; align-items: center; }
  .wt-local__dado { text-align: center; }

  /* Rodapé: 1 coluna, tudo centralizado (context.md §4.4) */
  .wt-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--wt-space-10);
    text-align: center;
    padding-block: var(--wt-space-12);
  }
  .wt-footer__col--marca { display: grid; justify-items: center; }
  .wt-footer__link { flex-direction: column; gap: var(--wt-space-1); }
  .wt-footer__social { justify-content: center; }
  .wt-footer__bottom-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .wt-legal__topbar {
    flex-direction: column;
    gap: var(--wt-space-5);
  }

  .wt-whatsapp-float {
    bottom: var(--wt-space-4);
    right: var(--wt-space-4);
  }
}

/* ==========================================================================
   30. Movimento reduzido
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .wt-marquee__track { animation: none; }
  .wt-marquee { overflow-x: auto; }
  .wt-whatsapp-float:hover { transform: none; }
  * { scroll-behavior: auto !important; }
}

/* ==========================================================================
   31. Responsivo — seções da Home
   ========================================================================== */

@media (max-width: 1024px) {
  .wt-produtos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .wt-bloco,
  .wt-bloco--invertido {
    grid-template-columns: 1fr;
    gap: var(--wt-space-8);
  }

  /* Empilhado: eyebrow, título e botão ao centro (a descrição segue
     justificada pela regra base). */
  .wt-bloco__texto { text-align: center; }
  .wt-bloco--invertido .wt-bloco__texto { order: 0; }

  .wt-oficina__inner {
    grid-template-columns: 1fr;
    gap: var(--wt-space-10);
  }

  /* Empilhada, a chamada da oficina vai ao centro, botão incluso. */
  .wt-oficina__conteudo { text-align: center; }
  .wt-oficina__midia { max-width: 520px; margin-inline: auto; }
}

@media (max-width: 768px) {
  .wt-produtos__outros,
  .wt-promos__grid { grid-template-columns: 1fr; }

  .wt-galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .wt-form { grid-template-columns: 1fr; }

  .wt-marquee--wide .wt-marquee__track { animation-duration: 26s; }
}

@media (max-width: 600px) {
  .wt-produtos__grid { grid-template-columns: 1fr; }

  .wt-oficina__selo {
    width: 44px;
    height: 44px;
    top: calc(var(--wt-space-5) * -1);
  }

  /* Ícone acima do texto, como nos contatos do rodapé (context.md §4.4). */
  .wt-eletricas__frase,
  .wt-promos__parcelamento { flex-direction: column; }

  /* Duas colunas em 360px: "RETROVISORES" não cabe no corpo de 18px. */
  .wt-pecas__item {
    font-size: var(--wt-fs-label);
    letter-spacing: var(--wt-ls-label);
    gap: var(--wt-space-2);
  }
}