/* ==========================================================================
   Transporte exclusivo

   A seção usa o MESMO módulo visual de "O que está incluído" (Module Base):
   tp-container + tp-grid, tp-label com a bolinha, título em .text-bodyL,
   blocos numerados .benefit-list e o card .brinde-card para o aviso. Por isso
   este arquivo é curto de propósito: só posiciona o wrapper (que vive no
   scroll normal, antes do formulário, e não dentro do palco do motor) e marca
   o destaque do terceiro item. Nenhuma cor, fonte ou espaçamento novo.
   ========================================================================== */

.transport-section {
  background: var(--sauter-wild-sand, #f4f4f4);
  color: var(--sauter-black-rock, #15032d);
  padding-top: clamp(6.4rem, 9vw, 12rem);
  padding-bottom: clamp(4.8rem, 7vw, 9rem);
}

/* O terceiro item é o diferencial da seção (desembarque dentro do camarote):
   ganha o mesmo tratamento de ênfase já usado na marca (mint sobre indigo). */
.transport-list__highlight .benefit-list__num {
  background: var(--sauter-mint, #baef26);
  color: var(--sauter-black-rock, #15032d);
}

.transport-list__highlight .benefit-list__txt strong {
  font-weight: 600;
}

/* Em telas largas os três blocos ficam lado a lado, como a grade de
   benefícios da seção "O que está incluído" faz no seu próprio contexto. */
@media (min-width: 1024px) {
  .transport-list.benefit-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Imagem da van logo abaixo do título. Mantém a proporção original do
   arquivo (1743x706) e usa object-contain para não cortar nenhuma parte do
   veículo nem da aplicação da marca, em qualquer largura de tela. */
.van-media {
  margin-top: clamp(2.4rem, 3.5vw, 4rem);
  aspect-ratio: 1743 / 706;
}

.transport-section .brinde-row {
  margin-top: clamp(3.2rem, 5vw, 5.6rem);
}