:root {
    --white: #ffffff;
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    --blue: #2563eb;
    --blue-dark: #1d4ed8;
    --blue-light: #3b82f6;
    /* Verde dos botoes de WhatsApp.

       O texto branco sobre verde tem um teto de luminancia: para passar em
       AA (4.5:1) o verde precisa ficar em L <= 0.1833. Como o canal verde
       sozinho responde por 0.7152 da luminancia, clarear o verde estoura esse
       limite muito antes do que se espera.

       #00a63e foi escolhido a pedido: verde saturado (saturacao 100 contra
       76 do #12853c anterior) para o botao de CTA ler como WhatsApp. O preco
       e contraste: 3.22:1 com branco, abaixo dos 4.5:1 do AA. Para voltar a
       passar sem mudar a cor do texto, o teto e #12853c, o verde mais vivo
       que ainda da 4.72:1 - e era o valor anterior, trocado duas vezes por
       pedido de um verde mais vivo.

       Ganho colateral na pagina do veiculo: contra o azul do card de CTA o
       #00a63e da 1.43:1, contra 1.02:1 do #12853c. Ainda abaixo dos 3:1 que
       um botao deveria ter contra o fundo, entao ali o verde se separa do
       card pela propria cor, e nao por contorno.

       O hover afunda um passo so (#0e8f37), o que mantem 4.2:1 com branco no
       estado de hover. */
    --green: #00a63e;
    --green-dark: #0e8f37;
    
    --font-primary: 'Bebas Neue', sans-serif;
    --font-secondary: 'Inter', sans-serif;
    
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    
    --transition: cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-secondary);
    background: var(--gray-100);
    color: var(--gray-900);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1 0 auto;
}

.loader {
    position: fixed;
    inset: 0;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: opacity 0.4s var(--transition), visibility 0.4s;
}

.loader.hidden {
    opacity: 0;
    visibility: hidden;
}

.loader-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.loader-logo-img {
    width: min(320px, 62vw);
    height: auto;
    display: block;
    margin-bottom: 3rem;
}

.loader-bar {
    width: 240px;
    height: 3px;
    background: var(--gray-200);
    border-radius: 100px;
    overflow: hidden;
    position: relative;
}

.loader-progress {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--blue-dark), var(--blue-light));
    border-radius: 100px;
    transition: width 0.35s var(--transition);
    box-shadow: 0 0 12px rgba(37, 99, 235, 0.4);
}

.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 1.5rem 3rem;
    transition: all 0.4s var(--transition);
}

.nav.scrolled {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 1.25rem 3rem;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1400px;
    margin: 0 auto;
}

.nav-logo {
    display: block;
    text-decoration: none;
    transition: opacity 0.3s var(--transition);
}

.nav-logo:hover {
    opacity: 0.85;
}

.nav-logo-img {
    height: 52px;
    width: auto;
    display: block;
}

.nav-links {
    display: flex;
    gap: 3rem;
}

.nav-cta {
    display: flex;
    align-items: center;
}

.nav-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.5rem;
    background: var(--blue);
    color: var(--white);
    font-family: var(--font-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 100px;
    white-space: nowrap;
    transition: all 0.3s var(--transition);
}

.nav-cta-btn:hover {
    background: var(--blue-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.3);
}

.nav-link {
    font-family: var(--font-secondary);
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--gray-700);
    text-decoration: none;
    letter-spacing: 0.02em;
    position: relative;
    transition: color 0.3s var(--transition);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--blue);
    transition: width 0.3s var(--transition);
}

.nav-link:hover {
    color: var(--gray-900);
}

.nav-link:hover::after {
    width: 100%;
}

/* Com "Quem somos" o menu passou a 6 links. Medido com probe de iframe: em
   1025px a soma logo + links + botao passava da largura util (1001px de
   conteudo em 921px) e os links pintavam por cima do botao. Com gap de
   1.5rem o conteudo cai para 881px, sobrando 40px (20px de cada lado).
   A partir de 1200px ja ha folga sozinha (1002px em 1096px) e o gap volta
   a 3rem. */
@media (min-width: 1025px) and (max-width: 1150px) {
    .nav-links {
        gap: 1.5rem;
    }
}

.nav-menu-btn {
    display: none;
    flex-direction: column;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
}

.nav-menu-btn span {
    width: 24px;
    height: 2px;
    background: var(--gray-900);
    transition: all 0.3s var(--transition);
}

.nav-menu-btn.active span:nth-child(1) {
    transform: rotate(45deg) translateY(8px);
}

.nav-menu-btn.active span:nth-child(2) {
    opacity: 0;
}

.nav-menu-btn.active span:nth-child(3) {
    transform: rotate(-45deg) translateY(-8px);
}

.mobile-menu {
    position: fixed;
    inset: 0;
    background: var(--white);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s var(--transition);
}

.mobile-menu.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}

.mobile-link {
    font-family: var(--font-primary);
    font-size: 2rem;
    font-weight: 400;
    color: var(--gray-900);
    text-decoration: none;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s var(--transition);
}

.mobile-menu.active .mobile-link {
    opacity: 1;
    transform: translateY(0);
}

.mobile-menu.active .mobile-link:nth-child(1) { transition-delay: 0.1s; }
.mobile-menu.active .mobile-link:nth-child(2) { transition-delay: 0.15s; }
.mobile-menu.active .mobile-link:nth-child(3) { transition-delay: 0.2s; }
.mobile-menu.active .mobile-link:nth-child(4) { transition-delay: 0.25s; }

@media (min-width: 1025px) {
    .mobile-menu {
        display: none;
    }
}

.section {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-100);
}

.hero-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.hero-image-wrapper {
    position: absolute;
    right: 2%;
    top: 50%;
    transform: translateY(-50%);
    width: 58%;
    height: 80%;
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-content {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: none;
    /*Padding simetrico de proposito: o bloco inteiro (titulo + botao) fica
      encostado à esquerda, alinhado com o que o botao precisa. O 6.5rem
      anterior empurrava o texto para dentro da imagem à direita.*/
    padding: 0 3rem;
    margin-top: -5vh;
}

.hero-title {
    font-family: var(--font-primary);
    font-size: clamp(4.5rem, 8.5vw, 8.5rem);
    font-weight: 400;
    line-height: 1.05;
    margin-bottom: 2.5rem;
}

.hero-title-line {
    display: block;
    color: transparent;
    background-image: linear-gradient(90deg, var(--gray-900) 0%, var(--gray-900) 34%, #ffffff 38%, #ffffff 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.hero-title-line:last-child {
    background-image: linear-gradient(90deg, var(--blue) 0%, var(--blue) 34%, #ffffff 38%, #ffffff 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

/* justify-content: center nos tres botoes base, e nao so no .btn-full.

   Os tres sao inline-flex, entao normalmente encolhem ate o texto e ficam
   simetricos sozinhos. Mas quando o botao e filho de um flex com align-items
   padrao (stretch), ele vira item de largura cheia e o texto encosta na
   esquerda: foi o que medido em 390px no botao de WhatsApp do card de CTA, com
   48px de folga de um lado e 109px do outro. Num container flex o
   text-align: center nao centraliza nada, porque o texto e um item do flex e
   quem alinha e o justify-content. */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: var(--gray-900);
    color: var(--white);
    font-family: var(--font-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: all 0.3s var(--transition);
    border: none;
    cursor: pointer;
}

.btn-primary:hover {
    background: var(--blue);
    transform: translateY(-2px);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: transparent;
    color: var(--gray-900);
    font-family: var(--font-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--radius-sm);
    border: 1px solid var(--gray-300);
    transition: all 0.3s var(--transition);
}

.btn-secondary:hover {
    border-color: var(--gray-900);
    background: var(--gray-900);
    color: var(--white);
}

.btn-blue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: var(--blue);
    color: var(--white);
    font-family: var(--font-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: all 0.3s var(--transition);
}

.btn-blue:hover {
    background: var(--blue-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(37, 99, 235, 0.3);
}

/* Botoes que abrem o WhatsApp.
   O seletor tem "a." para ficar com especificidade (0,1,1): assim vence o
   .btn-blue, o .nav-cta-btn e o .mobile-cta, que sao todos (0,1,0) e estao
   espalhados pelo arquivo em linhas diferentes. */
a.btn-whatsapp {
    background: var(--green);
    color: var(--white);
}

a.btn-whatsapp:hover {
    background: var(--green-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(14, 143, 55, 0.3);
}

.btn-full {
    width: 100%;
    justify-content: center;
}

.hero-scroll {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.hero-scroll-text {
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.hero-scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, var(--gray-400), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
    0%, 100% { opacity: 1; transform: scaleY(1); }
    50% { opacity: 0.5; transform: scaleY(0.6); }
}

.estoque {
    background: var(--white);
    /* 7.5rem, e nao os 3.5rem que estavam aqui. Esse era o unico valor fora
       da familia: as outras seis secoes com conteudo usavam 6rem, entao o
       Estoque encostava na Servicos com 2.5rem de respiro a menos que o resto
       da pagina. Subindo para 7.5rem junto com as outras, o espacamento
       entre secoes fica igual em toda a pagina e 1.5rem maior que era. */
    padding: 7.5rem 3rem;
    display: flex;
    flex-direction: column;
}

.estoque-header {
    max-width: 1400px;
    margin: 0 auto 2rem;
    width: 100%;
}

.estoque-footer {
    display: flex;
    justify-content: center;
    margin-top: 0.1rem;
}

.section-title {
    font-family: var(--font-primary);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 400;
    color: var(--gray-900);
    margin-bottom: 1.5rem;
}

.estoque-filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 0.625rem 1.25rem;
    background: transparent;
    border: 1px solid var(--gray-200);
    border-radius: 100px;
    font-family: var(--font-secondary);
    font-size: 0.8125rem;
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.3s var(--transition);
}

.filter-btn:hover {
    border-color: var(--gray-400);
    color: var(--gray-900);
}

.filter-btn.active {
    background: var(--gray-900);
    border-color: var(--gray-900);
    color: var(--white);
}

.estoque-grid {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    /* flex: 0 0 auto, e nao flex: 1. O .estoque e um flex column, entao
       flex: 1 fazia a grade esticar ate a altura minima da seção e, com
       align-items: start, sobrar um vazio no PE da grade - dentro dela, nao
       depois dela. Medido: 180px a 390px e 42px a 1296px de nada entre o
       ultimo card e a borda da grade. Era esse vazio que empurrava o botao
       "Ver todos os veiculos" para longe do carrossel, porque o botao fica
       depois da grade, e nao do cards. */
    flex: 0 0 auto;
    align-items: start;
}

.vehicle-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--gray-200);
    transition: all 0.4s var(--transition);
}

.vehicle-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    border-color: transparent;
}

.vehicle-card {
    display: flex;
    flex-direction: column;
}

.vehicle-card.filter-hidden {
    display: none;
}

.vehicle-image {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--gray-100);
    flex-shrink: 0;
}

.vehicle-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.3s var(--transition);
}

.vehicle-card:hover .vehicle-image img {
    opacity: 0.92;
}

.vehicle-info {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.vehicle-brand {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.vehicle-model {
    font-family: var(--font-primary);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--gray-900);
    margin: 0.5rem 0;
}

.vehicle-specs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--gray-600);
    margin-bottom: 1rem;
}

.dot {
    width: 3px;
    height: 3px;
    background: var(--gray-400);
    border-radius: 50%;
}

.vehicle-price {
    font-family: var(--font-primary);
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--gray-900);
    margin-bottom: 0.875rem;
    margin-top: auto;
}

.btn-vehicle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.5rem;
    background: var(--blue);
    color: var(--white);
    font-family: var(--font-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 100px;
    align-self: flex-start;
    transition: all 0.3s var(--transition);
}

.btn-vehicle:hover {
    background: var(--blue-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.25);
}

.experiencia {
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7.5rem 3rem;
}

.experiencia-content {
    max-width: 1400px;
    width: 100%;
}

.experiencia-header {
    margin-bottom: 4rem;
}

/* A intro encolhe so nesta secao. .section-intro e compartilhada com
   Servicos, FAQ e Contato, entao o ajuste fica escopado em .experiencia
   para nao mexer no texto das outras. */
.experiencia .section-intro {
    font-size: 1rem;
}

.experiencia-steps {
    --step-gap: 2rem;
    --step-raq: 29px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--step-gap);
    position: relative;
}

/* Trilho da linha. Vai do centro da primeira bolinha ao centro da ultima:
   a bolinha fica no inicio da sua coluna (nao centralizada), entao sobra
   meia coluna menos o raio do circulo ate a borda direita. */
.experiencia-steps::before {
    content: '';
    position: absolute;
    top: 29px;
    left: var(--step-raq);
    right: calc((100% - 3 * var(--step-gap)) / 4 - var(--step-raq));
    height: 2px;
    background: var(--gray-300);
    z-index: 0;
}

.step {
    position: relative;
    text-align: left;
}

.step-marker {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: flex-start;
    margin-bottom: 1.5rem;
}

.step-circle {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--white);
    border: 2px solid var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-primary);
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--blue);
    box-shadow: 0 0 0 7px rgba(37, 99, 235, 0.1);
}

/*Titulo da etapa em 1.125rem (18px). Era 1.375rem (22px) e ficava grande
   demais: e o maior texto fora dos titulos de secao, bem acima dos 20px do
   nome do veiculo, dos 16px dos pilares e dos 28px dos cards de servico,
   que swam entre 16 e 28px. 18px entra nessa faixa. */
.step-content h3 {
    font-family: var(--font-primary);
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--gray-900);
    margin-bottom: 0.75rem;
}

.step-content p {
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--gray-600);
}

/* ---- "COMO FUNCIONA" | PIN + REVELAÇÃO DIRIGIDA PELO SCROLL ----
   O estado inicial (bolinhas e textos em opacidade 0) só é aplicado
   quando o JS marca o wrapper com .processo-anim. Sem JS, ou com
   prefers-reduced-motion, nada fica escondido: a seção aparece como um
   grid estático e todo o conteúdo continua legível. */

.processo-wrap {
    position: relative;
}

/* Linha que "é desenhada" conforme o scroll (horizontal no desktop). */
.step-line {
    position: absolute;
    z-index: 0;
    top: 29px;
    left: var(--step-raq);
    right: calc((100% - 3 * var(--step-gap)) / 4 - var(--step-raq));
    height: 2px;
    background: var(--blue);
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
}

/* Esconder e pin sao duas coisas, e por isso duas classes.

   .processo-hide esconde as etapas enquanto a linha nao as alcanca, e sai no
   fim da animacao. .processo-anim e o pin (wrapper alto + sticky) e NAO sai
   no fim: enquanto ele estiver marcado a secao continua presa, e e ele que
   segura a tela parada ate o visitante continuar rolando. Antes as duas
   coisas usavam a mesma classe, e tirar a classe no fim da animacao derrubava
   o pin junto - a secao soltava e a seguinte aparecia no mesmo instante em que
   a ultima bolinha acendia, sem nenhuma pausa. */
.processo-hide .step-circle,
.processo-hide .step-content {
    opacity: 0;
}

/* Estado final, independente do GSAP: garante as etapas visiveis mesmo se os
   estilos inline forem limpos. */
.processo-done .step-circle,
.processo-done .step-content {
    opacity: 1;
}

/* Pin: mesmo idioma do #destaqueSobreWrap — wrapper alto + sticky interno.
   Só onde as etapas ainda estão em colunas (>= 1025px), porque em telas
   menores a pilha vertical inteira não caberia numa viewport de 100svh.

   Fica sob .processo-anim de propósito: o wrapper alto e o sticky só
   existem junto com a animação. Sem JS, ou com prefers-reduced-motion, a
   classe nunca é marcada e a seção volta a ser um bloco normal — senão o
   visitante rolaria 100svh por uma seção parada, sem nada acontecendo.

   Depois que a animação acaba a classe continua marcada de propósito. Ela é
   o que segura a seção parada durante a pausa antes da próxima, e-collapse
   desfeito depois: desfazer aqui encolheria o wrapper de 200svh para ~100svh
   e puxaria tudo que vem abaixo 100svh para cima, num salto. */

/* Card de localização + especificação da #sobre.

   A ordem do HTML já punha a localização antes da especificação; o que
   faltava era a linha no meio e as metades ocupando o card inteiro. Sem o
   flex: 1 1 0 o conteúdo fica empacotado à esquerda num card largo -
   medido a 390px: card de 342px, os dois textos terminavam em x=234 e
   sobravam 128px vazios à direita.

   Até 768px de propósito, que é onde o card deixa de ser absolute (a
   regra de base usa bottom/right: -2rem para ficar pendurado na imagem) e
   passa a ocupar a largura toda do fluxo. Acima disso ele continua
   estreito demais para as metades iguais: medido, sobram 290px de card e
   81px por metade, e "Compra e venda" e "com intermediação" quebravam em
   2 linhas cada.

   flex: 1 1 0 é o que põe a linha no meio do card - com basis 0 as duas
   metades crescem igual, e a borda do segundo .stat cai em x = metade da
   largura, medida exata nos 360, 390, 640 e 768px.

   border-left no segundo .stat em vez de pseudo-elemento: os dois .stat
   esticam na altura do card (align-items stretch, padrão do flex), então a
   borda atravessa a caixa toda. */
@media (max-width: 768px) {
    .sobre-stats .stat {
        /* basis auto, e nao 0. Com flex: 1 1 0 a contribuicao de cada .stat
           para a largura intrinseca do card e ZERO, entao o card encolhe ate
           uma largura que nao comporta o proprio texto e "Compra e venda" e
           "com intermediação" quebravam em 2 linhas - medido 242x104 com 4
           linhas dentro. Com basis auto o card encolhe ate o conteudo, que e
           exatamente o que a base (acima de 768px) faz: 257x84 com 1 linha
           em cada. O card fica menor que no desktop porque o padding e o
           gap sao menores, nao porque o texto encolhe. */
        flex: 1 1 auto;
        min-width: 0;
    }

    .sobre-stats .stat + .stat {
        border-left: 1px solid rgba(255, 255, 255, 0.28);
        padding-left: 2rem;
    }
}

@media (min-width: 1025px) {
    /* 200svh, e nao 250svh: o trecho preso e o wrapper menos a secao, ou
       seja 100svh de rolagem com a tela parada. Com 250svh eram 150svh, e
       medido nos primeiros 356px nenhum icone aparecia - so a linha
       crescendo devagar, o que lia como travamento. */
    .processo-anim {
        height: 200svh;
    }

    .processo-anim .experiencia {
        position: sticky;
        top: 0;
        height: 100svh;
        padding: 4rem 3rem;
    }

    .processo-anim .experiencia-header {
        margin-bottom: 3rem;
    }
}

/* Fundo igual ao do rodape: o mesmo gradiente de cinza
   (--gray-800 -> --gray-900).

   Este site usava dois degrades de 120px, um em cada ponta, para a secao
   desvanecer na cor da pagina. Eles foram removidos: agora a secao comeca e
   termina em corte seco, com a borda reta contra as secoes vizinhas (a
   "Experiencia" em #f8f9fa acima e a "Sobre" em branco abaixo).

   Se um dia os degrades voltarem, o do topo tem que ser para #f8f9fa e nao
   para o branco da "Sobre": o wrapper .destaque-sobre-wrap e transparente e
   o fundo do body e #f8f9fa, entao um fade para #ffffff deixaria o cinza do
   body aparecer sob a ultima faixa e viraria uma emenda mais adiante. E o
   degrade tem que ser de 120px fixos, e nao em porcentagem, pelo mesmo motivo
   do .servicos: a secao muda muito de altura entre viewports e um degrade em
   porcentagem atravessaria o conteudo.

   O texto desta secao ja e branco, entao continua legivel sobre o gradiente
   do rodape (um pouco menos que sobre o preto absoluto de antes). */
/* Cantos arredondados so em cima: e a "entrada" da secao, entao a base continua
   reta contra o branco da "Sobre" logo abaixo. Nos cantos aparece o fundo do
   wrapper, que e #f8f9fa - a mesma cor da "Experiencia" que vem acima, entao a
   curva nasce da secao vizinha em vez de recortar nada. */
.destaque {
    display: flex;
    align-items: center;
    background: linear-gradient(180deg, var(--gray-800) 0%, var(--gray-900) 100%);
    padding: 7.5rem 3rem;
    /* 3rem, o valor anterior aos 5rem. Medido: a 80px o canto ocupava 22,7%
       da largura da seção a 360px de tela, e a entrada lia como folha solta
       em vez de bloco. 48px continua sendo raio de seção - 32px
       (--radius-xl) é o que lia como cartão. */
    border-radius: 3rem 3rem 0 0;
}

/* Destaque e Sobre: agora as duas secoes ficam empilhadas no fluxo normal.

   Antes este wrapper segurava as duas com `position: sticky; height: 100svh;
   overflow: hidden` dentro de uma caixa de 150svh. Isso media mal de duas
   maneiras, e as duas foram relatadas:

   1. Sobreposicao - duas camadas sticky de 100svh cada dentro de 150svh nao
      cabem. O "Sobre" nunca encostava no topo e a camada preta do "Destaque"
      (z-index 1) ficava por cima do branco do "Sobre" durante o percurso.
   2. Corte - `height: 100svh` + `overflow: hidden` cortava o conteudo que
      fosse mais alto que a viewport. Medido em 1296x700: o "Sobre" tinha
      799px de conteudo numa caixa de 700px, ou seja, 99px sumiam.

   Sem o pin as duas secoas voltam a ter altura natural e nada e recortado. */
.destaque-sobre-wrap {
    position: relative;
    z-index: 0;
}

.destaque-content {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.destaque-visual {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    max-width: 740px;
    justify-self: end;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--gray-200);
}

.destaque-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.destaque-info {
    max-width: 500px;
    justify-self: start;
}

.destaque-tag {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: rgba(37, 99, 235, 0.2);
    /* Nao e o --blue-light: sobre o fundo cinza do rodape esse azul dava
       2.9:1 com o proprio fundo translucido da pilula. Este da 4.8:1, que e o
       minimo de AA para os 12px daqui. */
    color: #7cb0fb;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 100px;
    margin-bottom: 1.5rem;
}

.destaque-title {
    font-family: var(--font-primary);
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 400;
    color: var(--white);
    line-height: 1;
    margin-bottom: 2rem;
}

.destaque-specs {
    display: flex;
    gap: 3rem;
    margin-bottom: 2rem;
}

.destaque-spec {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.spec-value {
    font-family: var(--font-primary);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--white);
}

.spec-label {
    font-size: 0.75rem;
    /* O branco a 50% ficava em 4.0:1 no cinza do rodape. A 60% sobe para
       5.0:1 e continua discreto. */
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.destaque-price {
    font-family: var(--font-primary);
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--white);
    margin-bottom: 2rem;
}

.sobre {
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7.5rem 3rem;
}

.sobre-content {
    max-width: 1400px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.sobre-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--blue);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 1.5rem;
}

.sobre-title {
    font-family: var(--font-primary);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 400;
    color: var(--gray-900);
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.sobre-title span {
    display: block;
}

.sobre-text {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--gray-600);
    margin-bottom: 1rem;
    max-width: 450px;
}

.sobre-ctas {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.sobre-right {
    position: relative;
}

.sobre-image-container {
    border-radius: var(--radius-xl);
    overflow: hidden;
    aspect-ratio: 4/5;
}

.sobre-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sobre-stats {
    position: absolute;
    bottom: -2rem;
    right: -2rem;
    background: var(--gray-900);
    border-radius: var(--radius-lg);
    padding: 1.5rem 2rem;
    display: flex;
    gap: 2rem;
}

.stat {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 400;
    color: var(--white);
}

.stat-label {
    font-size: 0.75rem;
    color: var(--gray-400);
}

.cta {
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.cta-card {
    position: relative;
    z-index: 10;
    width: min(100%, 1100px);
    margin: 0 auto;
    padding: 5.5rem 4rem;
    text-align: center;
    color: var(--white);
    /* Mesmo gradiente do .vehicle-cta-inner, de proposito: os dois cards de
       CTA do site sao o mesmo elemento visual e estavam com dois azuis
       diferentes - este ia ate #93c5fd, aquele parava em #2f70e3. Alem da
       diferenca de tom, o branco do texto aqui caia para 1.80:1 na ponta
       clara. Comprimido para a mesma faixa, os dois ficam entre 6.70:1 e
       4.62:1 com branco puro, que e o teto do branco sobre azul. */
    background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 45%, #2f70e3 100%);
    border-radius: 3rem;
    box-shadow: 0 24px 60px rgba(37, 99, 235, 0.28);
}

.cta-title {
    font-family: var(--font-primary);
    font-size: clamp(3.25rem, 6.5vw, 5.5rem);
    font-weight: 400;
    color: var(--white);
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.cta-title span {
    display: block;
}

.cta-desc {
    font-family: var(--font-secondary);
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.92);
    max-width: 560px;
    margin: 0 auto 3rem;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-card .btn-primary,
.cta-card .btn-blue,
.cta-card .btn-secondary {
    border-radius: 100px;
    padding: 1.125rem 3rem;
    font-size: 1rem;
}

.cta-card .btn-blue {
    background: var(--white);
    color: var(--blue-dark);
}

.cta-card .btn-blue:hover {
    background: var(--gray-100);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

/*O botao secundario fica branco, e nao azul. Medido: com --blue-dark
  (#1d4ed8) sobre o gradiente, que nessa altura ja e #559af9, o contraste
  do botao contra o fundo era de 2.35:1 - azul sobre azul claro, o botao
  se fundia no card e nao aparecia. Branco com texto --blue-dark inverte o
  par: o botao principal ja e o escuro (--gray-900), entao o card fica
  com um botao de cada cor e os dois se leem. Mesmo padrao que
  .vehicle-cta-inner .btn-primary ja usava. */
.cta-card .btn-secondary {
    background: var(--white);
    border-color: var(--white);
    color: var(--blue-dark);
    /* Sombra para o botao branco descolar do azul claro da parte de baixo
       do gradiente, onde a forma sozinha fica em 2.85:1. */
    box-shadow: 0 8px 20px rgba(12, 34, 84, 0.22);
}

.cta-card .btn-secondary:hover {
    background: var(--gray-100);
    border-color: var(--gray-100);
    color: var(--blue-dark);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.footer {
    position: relative;
    width: 100%;
    padding: 4.5rem 0 0;
    background: linear-gradient(180deg, var(--gray-800) 0%, var(--gray-900) 100%);
    color: #b6bec8;
    z-index: 10;
}

.footer-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 3rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
    gap: 2.5rem;
    padding-bottom: 3rem;
}

.footer-logo-img {
    width: 150px;
    filter: brightness(0) invert(1);
}

.footer-tagline {
    max-width: 300px;
    margin: 1.2rem 0 0;
    font-size: 0.92rem;
    line-height: 1.7;
}

.footer-col {
    display: grid;
    align-content: start;
    gap: 0.6rem;
}

.footer-col h3 {
    margin: 0 0 0.55rem;
    color: var(--white);
    font-family: var(--font-primary);
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.02em;
}

.footer-col a {
    width: fit-content;
    font-size: 0.92rem;
    color: inherit;
    text-decoration: none;
    transition: color 0.3s var(--transition);
}

.footer-col a:hover {
    color: var(--white);
}

.footer-contact-item {
    display: grid;
    gap: 0.15rem;
}

.footer-contact-label {
    color: var(--white);
    font-size: 0.92rem;
    font-weight: 600;
}

.footer-contact-value {
    color: #8a94a3;
    font-size: 0.85rem;
    font-style: italic;
    text-decoration: none;
    transition: color 0.3s var(--transition);
}

.footer-contact-value:hover {
    color: var(--white);
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.4rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 0.85rem;
    color: rgba(185, 203, 230, 0.75);
}

.footer-bottom a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s var(--transition);
}

.footer-bottom a:hover {
    color: var(--white);
}

@media (max-width: 1024px) {
    .nav {
        padding: 1.25rem 2rem;
    }
    
    .nav-links {
        display: none;
    }
    
    .nav-cta {
        margin-left: auto;
        margin-right: 1rem;
    }
    
    .nav-menu-btn {
        display: flex;
    }
    
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .hero-image-wrapper {
        width: 80%;
        right: 1.5rem;
    }

    .hero-content {
        padding: 0 2rem;
    }

    .hero-title-line {
        color: var(--gray-900);
        background-image: none;
    }

    .hero-title-line:last-child {
        color: var(--blue);
        background-image: none;
    }
    
    .estoque-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .experiencia-steps {
        --step-gap: 2.5rem;
        --step-raq: 19px;
        grid-template-columns: 1fr;
        gap: var(--step-gap);
        padding-left: 3.5rem;
    }

    /* Mesma linha agora vertical: nasce no centro da primeira bolinha e
       cresce de cima para baixo.

       --step-line-fim e o comprimento real, medido em JS (ver
       medirLinhaVertical em main.js). Com bottom: 0 a linha ia ate o fim da
       ultima etapa, ou seja passava por dentro do texto dela e ainda sobrava
       um rabo abaixo da ultima bolinha. A distancia ate o centro da ultima
       bolinha depende do tamanho do texto de cada etapa, que muda com o
       viewport, entao nao da para escrever esse comprimento em CSS.

       O fallback e height: 100%, que e o comportamento antigo: sem JS a linha
       ainda passa do ponto. */
    .experiencia-steps::before {
        top: var(--step-raq);
        bottom: auto;
        left: var(--step-raq);
        width: 2px;
        height: var(--step-line-fim, 100%);
        right: auto;
    }

    .step-line {
        top: var(--step-raq);
        bottom: auto;
        left: var(--step-raq);
        right: auto;
        width: 2px;
        height: var(--step-line-fim, 100%);
        transform: scaleY(0);
        transform-origin: top center;
    }

    .step-marker {
        position: absolute;
        left: -3.5rem;
        top: 0;
        margin-bottom: 0;
    }

    .step-circle {
        width: 38px;
        height: 38px;
        font-size: 0.7rem;
    }
    
    .destaque-content {
        padding: 0 1.5rem;
        gap: 3rem;
    }

    .destaque-visual {
        max-width: 100%;
    }

    .destaque-info {
        max-width: 100%;
    }
    
    .sobre-content {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

/* Micro-interactions */
.vehicle-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    opacity: 0;
    transition: opacity 0.4s var(--transition);
    pointer-events: none;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.05), transparent);
}

.vehicle-card:hover::before {
    opacity: 1;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--gray-100);
}

::-webkit-scrollbar-thumb {
    background: var(--gray-400);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gray-500);
}

/* Selection color */
::selection {
    background: var(--blue);
    color: var(--white);
}

/* Focus styles */
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.whatsapp-float {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25d366;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
    animation: whatsappPulse 2.5s infinite;
    transition: transform 0.3s var(--transition);
}

.whatsapp-float:hover {
    transform: translateY(-3px) scale(1.06);
}

.whatsapp-float svg {
    width: 30px;
    height: 30px;
    fill: var(--white);
}

@keyframes whatsappPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45), 0 8px 24px rgba(37, 211, 102, 0.4);
    }
    70% {
        box-shadow: 0 0 0 20px rgba(37, 211, 102, 0), 0 8px 24px rgba(37, 211, 102, 0.4);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0), 0 8px 24px rgba(37, 211, 102, 0.4);
    }
}

@media (max-width: 768px) {
    .whatsapp-float {
        bottom: 1.5rem;
        right: 1.5rem;
        width: 54px;
        height: 54px;
    }

    .whatsapp-float svg {
        width: 27px;
        height: 27px;
    }

    .nav-cta {
        display: none;
    }
}

/* Button ripple effect */
.btn-primary,
.btn-secondary {
    position: relative;
    overflow: hidden;
}

.btn-primary::after,
.btn-secondary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    transform: scale(0);
    opacity: 0;
    transition: transform 0.5s var(--transition), opacity 0.5s var(--transition);
}

.btn-primary:active::after,
.btn-secondary:active::after {
    transform: scale(2);
    opacity: 1;
    transition: 0s;
}

@media (max-width: 768px) {
    .hero-content {
        padding: 0 1.5rem;
        margin-top: 0;
    }

    /*Letras mais grossas no celular. A titulacao usa Bebas Neue, que so
      tem o peso 400: pedir font-weight: 700 nao engrossa nada, porque o
      navegador nem tem o arquivo da fonte grossa. O -webkit-text-stroke
      engrossa o proprio desenho da letra, entao a tipografia do site
      continua a mesma. O valor em em acompanha o tamanho da fonte em
      cada tela.*/
    .hero-title-line {
        -webkit-text-stroke: 0.02em var(--gray-900);
        -webkit-text-fill-color: var(--gray-900);
    }

    .hero-title-line:last-child {
        -webkit-text-stroke: 0.02em var(--blue);
        -webkit-text-fill-color: var(--blue);
    }

    /* No celular a hero deixa de ser uma tela cheia: o texto vem primeiro
       sobre o fundo branco, o botao logo abaixo, e so entao a foto, na
       horizontal e bem arredondada.

       A base estava fazendo o contrario: a foto era o fundo inteiro
       (opacity 0.4, height 130%, top -15%, border-radius 0) e o texto
       ficava por cima dela, com a seção em min-height 100vh. Duas
       consequencias que sumiram junto: o cinza da foto em 40% escurecia o
       texto, e a "hero" ocupava a tela toda mesmo sem conteudo que
       justificasse.

       A foto continua sendo .hero-bg > .hero-image-wrapper, e nessa ordem
       de proposito: e o parallax do main.js que escreve transform inline em
       .hero-image-wrapper (yPercent 10) e em .hero-bg (scale 1.02), e ele
       ganha do CSS. Com .hero-bg virando o cartão arredondado, ele volta a
       ter overflow: hidden para conter esse transform - sem isso a foto
       desceria 10% da propria altura por cima da seção seguinte. Por isso o
       wrapper continua com height 130% e top -15%: 10% de 130% cabe
       inteiro dentro do cartão.

       order em vez de reordenar o HTML: .hero-bg vem antes de .hero-content
       no arquivo, e o mesmo truque ja e usado no .destaque-visual. */
    .hero {
        /* min-height sai fora de proposito: o .section ja traz 100svh e e ele
           que faz a hero ocupar a tela toda no celular. Anotado aqui porque
           foi o que quase passou: a regra do @supports (min-height: 100svh)
           vem DEPOIS deste bloco no arquivo e, com o mesmo peso, ganharia de
           um min-height: 0 escrito aqui. */
        flex-direction: column;
        align-items: stretch;
        /* space-between, e nao flex-start: o que sobra da tela vai para o
           unico lugar em que ele le como respiro - entre o texto e a foto -
           em vez de ficar como um buraco branco no pe da hero. */
        justify-content: space-between;
        gap: 2rem;
        background: var(--white);
        padding: 6.5rem 1.5rem 2.5rem;
    }

    .hero-content {
        order: 1;
        padding: 0;
        margin-top: 0;
    }

    .hero-bg {
        order: 2;
        position: relative;
        inset: auto;
        width: 100%;
        /* A foto e o elemento que absorve a sobra da tela: com flex: 1 ela
           cresce quando sobra altura (tela baixa) e, no max-height, para de
           crescer na proporcao 4/3 (tela alta) para nunca virar retrato.
           Medido sem o flex: sobrava 20px a 360x740, 83px a 390x844, 125px a
           430x932 e 42px a 768x1024 - sempre no pe da hero. */
        flex: 1 1 auto;
        aspect-ratio: 4 / 3;
        max-height: calc((100vw - 3rem) * 0.75);
        border-radius: 2.5rem;
        overflow: hidden;
    }

    .hero-image-wrapper {
        width: 100%;
        height: 130%;
        left: 0;
        right: 0;
        top: -15%;
        transform: none;
        opacity: 1;
        border-radius: 0;
    }

    /* O indicador "Scroll" e absolute no rodape da hero. Com a hero mais
       baixa que a tela ele passaria por cima da foto, entao some no celular
       - ele so faz sentido quando a seção ocupa a tela inteira. */
    .hero-scroll {
        display: none;
    }

    .estoque {
        padding: 6rem 1.5rem;
    }

    .estoque-grid {
        grid-template-columns: 1fr;
    }
    
    .experiencia {
        padding: 4rem 1.5rem;
    }
    
    .experiencia-steps {
        --step-gap: 1.5rem;
        grid-template-columns: 1fr;
        gap: var(--step-gap);
    }
    
    .destaque-content {
        padding: 0;
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .destaque {
        padding: 4rem 1.5rem;
    }

    .destaque-visual {
        max-width: 100%;
    }

    .destaque-info {
        max-width: 100%;
    }

    .destaque-specs {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1.5rem;
    }
    
    .sobre {
        padding: 4rem 1.5rem;
    }

    /* O texto da "Quem somos" centralizado no celular: tag, titulo e
       paragrafos. O .sobre-text ganha margin auto porque tem max-width 450px
       - sem isso o bloco encosta na esquerda mesmo com o texto
       centralizado. Os botoes sao um flex entao precisam do justify-content. */
    .sobre-left {
        text-align: center;
    }

    .sobre-text {
        margin-left: auto;
        margin-right: auto;
    }

    .sobre-ctas {
        justify-content: center;
    }

    /* O card volta a pender na imagem, como no desktop, e menor.

       A base usa bottom/right: -2rem. No celular so o bottom se aproveita:
       a imagem ocupa a largura toda da grade, entao sobra ~12px de cada lado
       e um right negativo seria cortado pelo overflow: hidden do .section.
       Medido a 390px: a imagem tem 342px e sobram 12px de cada lado - por
       isso right: 0 e o card fica dentro da imagem, pendurado no canto.

       O card encolhe porque absolute + display: flex deixa o elemento no
       tamanho do conteudo: as duas metades passam a ter a largura do proprio
       texto em vez de dividir a largura toda. Medido a 390px: 342px de card
       antes, ~260px agora, com os mesmos textos dentro. */
    .sobre-stats {
        position: absolute;
        bottom: -1rem;
        right: 0;
        margin-top: 0;
        padding: 1rem 1.25rem;
        gap: 1.25rem;
        border-radius: var(--radius-md);
        max-width: calc(100% - 0.75rem);
    }

    /* A foto do Destaque vem antes do nome e das especificacoes quando a
       grade vira uma coluna. A ordem do HTML (info, depois visual) e o que
       fazia a foto cair embaixo de tudo no celular. */
    .destaque-visual {
        order: -1;
    }

    .cta-card {
        width: calc(100% - 2rem);
        padding: 4rem 1.5rem;
        border-radius: 1.5rem;
    }
    
    .cta-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .cta .btn-blue,
    .cta .btn-secondary {
        width: 100%;
        justify-content: center;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

/* ============================================================
   PD MOTORS | VITRINE DA HOME + PÁGINA DE VEÍCULOS
   ============================================================ */

.vehicle-card {
    text-decoration: none;
    color: inherit;
}

.vehicle-card:hover .btn-vehicle {
    background: var(--blue-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.25);
}

.estoque-footer {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}

.btn-vehicle-lg {
    padding: 0.875rem 2.25rem;
    font-size: 0.9375rem;
}

.btn-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    background: var(--blue);
    color: var(--white);
    font-family: var(--font-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 100px;
    margin-bottom: 2.5rem;
    transition: all 0.3s var(--transition);
}

.btn-back svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.btn-back:hover {
    background: var(--blue-dark);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.25);
}

.vehicle-back {
    position: absolute;
    top: 5.5rem;
    left: 3rem;
    z-index: 3;
    margin-bottom: 0;
}

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s var(--transition), transform 0.7s var(--transition);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Página de estoque completo */

.veiculos-header {
    background: var(--gray-100);
    padding: 8rem 0 2rem;
}

.veiculos-header-inner {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 0 3rem;
}

.veiculos-header .btn-back {
    margin-bottom: 1.5rem;
}

.veiculos-title {
    font-family: var(--font-primary);
    font-size: clamp(2.75rem, 5vw, 4.5rem);
    font-weight: 400;
    line-height: 1.1;
    color: var(--gray-900);
    margin: 0;
}

.veiculos-subtitle {
    font-family: var(--font-secondary);
    font-size: 1.0625rem;
    font-weight: 300;
    line-height: 1.6;
    color: var(--gray-600);
    max-width: 560px;
    margin: 1rem 0 0;
}

.veiculos-stock {
    background: var(--white);
    display: flex;
    flex-direction: column;
}

.veiculos-stock-inner {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 1.5rem 3rem 6rem;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--gray-200);
    border-radius: 24px;
    padding: 1.25rem;
    margin-bottom: 2rem;
}

.filter-select {
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--font-secondary);
    font-size: 0.875rem;
    color: var(--gray-700);
    background-color: var(--white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23495057' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    border: 1px solid var(--gray-200);
    border-radius: 100px;
    padding: 0.75rem 2.5rem 0.75rem 1.25rem;
    cursor: pointer;
    min-width: 180px;
    transition: border-color 0.3s var(--transition), box-shadow 0.3s var(--transition);
}

.filter-select:hover {
    border-color: var(--gray-400);
}

.filter-select:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.filter-clear {
    font-family: var(--font-secondary);
    font-size: 0.875rem;
    color: var(--gray-500);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.75rem 1rem;
    transition: color 0.3s var(--transition);
}

.filter-clear:hover {
    color: var(--gray-900);
}

.stock-count {
    font-family: var(--font-secondary);
    font-size: 0.875rem;
    color: var(--gray-500);
    margin-bottom: 2rem;
}

.stock-empty {
    font-family: var(--font-secondary);
    font-size: 1rem;
    color: var(--gray-500);
    text-align: center;
    padding: 4rem 0;
}

/* ============================================================
   PD MOTORS | PÁGINA INDIVIDUAL DO VEÍCULO
   ============================================================ */

.vehicle-hero {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 4rem;
    align-items: center;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 8rem 3rem 4rem;
    background: var(--gray-100);
    position: relative;
}

.gallery-main {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--gray-200);
    cursor: zoom-in;
    max-height: 80vh;
    min-width: 0;
    max-width: 100%;
}

.gallery-main-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: opacity 0.2s var(--transition);
    max-height: 100%;
    max-width: 100%;
    object-position: center;
}

.gallery,
.vehicle-panel {
    min-width: 0;
}

.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s var(--transition), background 0.3s var(--transition);
    z-index: 2;
}

.gallery-nav svg {
    width: 22px;
    height: 22px;
    color: var(--gray-900);
}

.gallery-nav:hover {
    transform: translateY(-50%) scale(1.06);
    background: var(--white);
}

.gallery-prev {
    left: 1rem;
}

.gallery-next {
    right: 1rem;
}

.gallery-counter {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    font-family: var(--font-secondary);
    font-size: 0.75rem;
    color: var(--white);
    background: rgba(33, 37, 41, 0.6);
    border-radius: 100px;
    padding: 0.375rem 0.875rem;
    z-index: 2;
}

.gallery-thumbs {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.gallery-thumb {
    width: 84px;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    padding: 0;
    border: 2px solid transparent;
    cursor: pointer;
    opacity: 0.65;
    transition: opacity 0.3s var(--transition), border-color 0.3s var(--transition);
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.gallery-thumb:hover {
    opacity: 1;
}

.gallery-thumb.active {
    opacity: 1;
    border-color: var(--blue);
}

.vehicle-panel {
    display: flex;
    flex-direction: column;
}

.v-brand {
    font-family: var(--font-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--blue);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.v-model {
    font-family: var(--font-primary);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 400;
    line-height: 1.05;
    color: var(--gray-900);
    margin: 0.75rem 0 1.25rem;
}

.v-specs {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-family: var(--font-secondary);
    font-size: 1rem;
    color: var(--gray-600);
    margin-bottom: 1.75rem;
}

.v-price {
    font-family: var(--font-primary);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 400;
    color: var(--gray-900);
    margin-bottom: 2.25rem;
}

.vehicle-panel .btn-primary {
    padding: 1rem 2.25rem;
    font-size: 0.9375rem;
    align-self: flex-start;
}

/* Seções internas do veículo */

.vehicle-specs-section {
    background: var(--white);
    padding: 6rem 0;
}

.vehicle-section-inner {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 0 3rem;
}

.vehicle-section-title {
    font-family: var(--font-primary);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    color: var(--gray-900);
    margin-bottom: 3rem;
}

.spec-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.spec-card {
    background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 55%, var(--blue-light) 100%);
    border: none;
    border-radius: 24px;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.2);
}

.spec-card-label {
    font-family: var(--font-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.78);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.spec-card-value {
    font-family: var(--font-primary);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--white);
}

.vehicle-desc-section {
    background: var(--gray-100);
    padding: 6rem 0;
}

.vehicle-desc {
    font-family: var(--font-secondary);
    font-size: clamp(1.25rem, 2vw, 1.625rem);
    font-weight: 300;
    line-height: 1.65;
    color: var(--gray-700);
    max-width: 760px;
}

.highlight-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2.5rem;
}

.highlight-pill {
    font-family: var(--font-secondary);
    font-size: 0.875rem;
    color: var(--blue-dark);
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.28);
    border-radius: 100px;
    padding: 0.5rem 1.25rem;
}

.vehicle-gallery-section {
    background: var(--white);
    padding: 6rem 0;
}

/* ---------- vídeos do veículo ----------
   Só entra no HTML quando o veículo tem vídeo, então não há estado
   vazio para estilizar aqui.

   Um vídeo por linha cheia em vez de grade: é o que a pessoa quer ver
   quando chega nesta seção, e dois players lado a lado rolando juntos
   brigam pelo áudio. preload="metadata" no tag não deixa baixar o
   arquivo inteiro de um veículo com vários vídeos - só quando a pessoa
   aperta play. */
.vehicle-videos-section {
    background: var(--white);
    padding: 6rem 0;
}

.vehicle-video-grid {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.vehicle-video {
    margin: 0;
}

.vehicle-video video {
    display: block;
    width: 100%;
    max-height: 78vh;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: #000;
    border-radius: var(--radius-lg);
}

.vehicle-video figcaption {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: var(--gray-500);
}

.editorial-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    min-width: 0;
}

.editorial-item {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    overflow: hidden;
    padding: 0;
    border: none;
    cursor: zoom-in;
    background: var(--gray-200);
}

.editorial-large {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 9;
}

.editorial-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: opacity 0.3s var(--transition);
}

.editorial-item:hover img {
    opacity: 0.92;
}

.vehicle-cta-section {
    background: var(--white);
    padding: 6rem 0;
}

.vehicle-cta-inner {
    text-align: center;
    /* Sem este width o card herda o `width: 100%` do .vehicle-section-inner e
       encosta nas duas bordas da tela. O max-width: 960px so segurava a partir
       de 960px; medido em 900px de viewport, o card ocupava 892px de 892px,
       com 0 de margem dos dois lados. calc(100% - 6rem) devolve as 3rem de
       margem que o resto da pagina usa, e o max-width continua centrando
       acima de 960px. */
    width: calc(100% - 6rem);
    max-width: 960px;
    margin: 0 auto;
    padding: 4.5rem 3rem;
    border-radius: 1.5rem;
    /* O gradiente ia ate #93c5fd, onde o texto branco do card caia para
       1.80:1 - ilegivel. O branco sobre azul so passa em AA enquanto o azul
       ficar com luminancia ate 0.1833, e o canal verde domina isso, entao a
       ponta clara nao pode passar de #2f70e3 (4.62:1 com branco puro). O
       gradiente foi comprimido para dentro dessa faixa em vez de trocar a
       cor do texto, que perderia a identidade do card. */
    background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 45%, #2f70e3 100%);
    color: var(--white);
}

.vehicle-cta-title {
    font-family: var(--font-primary);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 400;
    color: var(--white);
    margin-bottom: 1.25rem;
}

.vehicle-cta-text {
    font-family: var(--font-secondary);
    font-size: 1.125rem;
    /* Branco puro, e nao 92%: a 92% o texto perdia parte do contraste e caia
       abaixo de 4.5:1 na ponta mais clara do gradiente. Sao 18px, que ainda
       nao contam como texto grande. */
    color: var(--white);
    max-width: 520px;
    margin: 0 auto 2.5rem;
    line-height: 1.6;
}

.vehicle-cta-inner .btn-primary {
    display: inline-flex;
    padding: 1rem 2.25rem;
    font-size: 0.9375rem;
    background: var(--white);
    color: var(--blue-dark);
}

.vehicle-cta-inner .btn-primary:hover {
    background: var(--gray-100);
    transform: translateY(-2px);
}

/* O botao de WhatsApp deste card entra no mesmo verde dos demais. A regra
   acima pinta de branco qualquer .btn-primary do card, e ela tem
   especificidade (0,2,0) - maior que a do a.btn-whatsapp (0,1,1) -, entao
   precisa ser reaffirmada aqui, depois, para o verde passar. */
.vehicle-cta-inner .btn-whatsapp {
    background: var(--green);
    color: var(--white);
    /* Sem contorno de proposito. O anel branco de 2px que estava aqui foi
       removido a pedido. Ele existia porque o verde antigo (#12853c) dava
       1.02:1 contra o azul do card, bem abaixo dos 3:1 que um botao precisa
       ter contra o fundo. Com o verde novo (#00a63e) a separacao sobe para
       1.43:1, ainda imperfeita, mas agora e a propria cor que faz o
       trabalho em vez de um contorno artificial. */
}

/* O a.btn-whatsapp:hover e (0,2,1) e ganha do (0,2,0) da regra acima, entao o
   verde precisa ser reaffirmado aqui, depois, para o hover nao perder a
   cor. */
.vehicle-cta-inner .btn-whatsapp:hover {
    background: var(--green-dark);
}

.vehicle-cta-back {
    margin-top: 2.5rem;
}

/* Mesmo caso do botao da home, invertido: aqui o principal ja e branco,
   entao o link de volta e que vira escuro. Com --blue (#2563eb) sobre o
   gradiente (#5fa4fa na altura dele) o contraste era de 2.01:1 e o botao
   desaparecia. --gray-900 sobe para ~5.9:1. */
.vehicle-cta-back .btn-back {
    margin-bottom: 0;
    background: var(--gray-900);
    color: var(--white);
}

.vehicle-cta-back .btn-back:hover {
    background: var(--gray-800);
    color: var(--white);
}

.vehicle-related-section {
    background: var(--gray-100);
    padding: 6rem 0;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

/* Lightbox */

.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(15, 17, 20, 0.92);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: lightboxFade 0.3s var(--transition);
}

@keyframes lightboxFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.lightbox-img {
    max-width: 86vw;
    max-height: 82vh;
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
    transition: opacity 0.2s var(--transition);
}

.lightbox-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s var(--transition);
}

.lightbox-close svg {
    width: 22px;
    height: 22px;
    color: var(--white);
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.22);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s var(--transition);
}

.lightbox-nav svg {
    width: 24px;
    height: 24px;
    color: var(--white);
}

.lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.24);
}

.lightbox-prev {
    left: 1.5rem;
}

.lightbox-next {
    right: 1.5rem;
}

.lightbox-counter {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-secondary);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Responsivo das novas páginas */

@media (max-width: 1024px) {
    .vehicle-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 3rem;
        padding: 7rem 2rem 3rem;
        min-height: auto;
    }
    .vehicle-back {
        left: 2rem;
    }
    .spec-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    .related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .gallery-main {
        max-height: 70vh;
    }
    .gallery-main-img {
        max-height: 70vh;
    }
}

@media (max-width: 768px) {
    .veiculos-header {
        padding: 7rem 0 1.5rem;
    }

    .veiculos-header-inner {
        padding: 0 1.5rem;
    }

    .veiculos-stock-inner {
        padding: 1.5rem 1.5rem 4rem;
    }

    .filter-bar {
        padding: 1rem;
    }

    .filter-select {
        flex: 1 1 100%;
        min-width: 0;
    }

    .vehicle-hero {
        padding: 6.5rem 1.5rem 2.5rem;
        min-height: auto;
        gap: 2rem;
    }

    .gallery-main {
        max-height: 55vh;
    }

    .gallery-main-img {
        max-height: 55vh;
    }

    .vehicle-back {
        top: 5rem;
        left: 1.5rem;
    }

    .gallery-thumb {
        width: 68px;
        max-width: 25%;
    }

    .vehicle-specs-section,
    .vehicle-desc-section,
    .vehicle-gallery-section,
    .vehicle-videos-section,
    .vehicle-related-section {
        padding: 4rem 0;
    }

    .vehicle-section-inner {
        padding: 0 1.5rem;
    }

    .spec-cards {
        grid-template-columns: 1fr;
    }

    .editorial-gallery {
        grid-template-columns: 1fr;
    }

    .editorial-large {
        grid-column: auto;
        aspect-ratio: 16 / 9;
    }

    .related-grid {
        grid-template-columns: 1fr;
    }

    .vehicle-cta-section {
        padding: 4rem 0;
    }

    .vehicle-cta-inner {
        /* Sem isto o card fica com a largura toda da tela (medido: 382px
           dentro de 390px, zero de margem) e o border-radius encosta nas
           duas bordas, o que quebra a leitura de "card". */
        width: calc(100% - 3rem);
        margin: 0 auto;
        padding: 3rem 1.5rem;
        border-radius: 1.25rem;
    }

    .lightbox-nav {
        width: 44px;
        height: 44px;
    }

    .lightbox-prev {
        left: 0.75rem;
    }

    .lightbox-next {
        right: 0.75rem;
    }
}

/* ============================================================
   PRIME DRIVE | REFINAMENTO RESPONSIVO
   Escala proporcional de tipografia, espaçamentos e grids,
   preservando a composição do desktop.
   ============================================================ */

/* Altura de tela moderna (svh/dvh), com conteúdo livre para crescer */
@supports (min-height: 100svh) {
    body {
        min-height: 100svh;
    }

    .section {
        min-height: 100svh;
    }
}

a,
button {
    -webkit-tap-highlight-color: transparent;
}

/* Botão de filtros (oculto no desktop, ativado no mobile) */
.filter-toggle {
    display: none;
}

.mobile-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.875rem 2.25rem;
    background: var(--blue);
    color: var(--white);
    font-family: var(--font-secondary);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 100px;
}

/* ============================================================
   DESTAQUES DA HOME | CARROSSEL HORIZONTAL NO MOBILE
   ============================================================

   Abaixo de 768px a grade de destaques vira um carrossel de
   rolagem nativa. O escopo e #featuredGrid de proposito: a
   classe .estoque-grid tambem e usada pela pagina de estoque
   (#stockGrid), que precisa continuar com o grid normal.

   Nao ha JavaScript de carrossel: quem rola e o proprio
   container, e o scroll-snap encaixa cada card ao fim do
   gesto. Sem autoplay - a navegacao e do usuario.

   O card ocupa 84% da largura do container. Com o espacamento
   de 1.25rem sobra de 10% a 16% do proximo card aparecendo
   na direita, variando conforme a largura da tela. No fim da
   rolagem sobra o mesmo espaco a direita do ultimo card, entao
   ele nunca encosta na borda da tela. */
@media (max-width: 768px) {
    #featuredGrid {
        display: flex;
        flex-wrap: nowrap;
        gap: 1.25rem;
        align-items: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        /* Barra de rolagem invisivel, rolagem intacta. */
        scrollbar-width: none;
        -ms-overflow-style: none;
        /* O gesto nao "puxa" a pagina inteira para o lado. */
        overscroll-behavior-x: contain;
        /* Evita selecionar o texto do card a cada arrasto. */
        -webkit-user-select: none;
        user-select: none;
        /* touch-action fica no padrao (auto) de proposito: e o que
           mantem o scroll vertical da pagina funcionando quando o
           dedo comeca sobre um card. */
    }

    #featuredGrid::-webkit-scrollbar {
        display: none;
    }

    #featuredGrid .vehicle-card {
        flex: 0 0 84%;
        max-width: 84%;
        scroll-snap-align: start;
    }

    /* O ultimo card precisa de espaco depois dele. Sem isso a posicao
       de encaixe dele fica alem do fim da rolagem, o navegador trava
       um card antes e ele nunca aparece inteiro. Com o espaco, ele
       encaixa a esquerda e sobra folga a direita - que e o mesmo
       recuo que existe entre os cards. */
    #featuredGrid .vehicle-card:last-child {
        margin-right: 20%;
    }

    /* Indicador de posicao. Discreto de proposito, para nao
       competir com a identidade visual da vitrine. */
    #estoqueDots {
        display: flex;
        justify-content: center;
        gap: 0.375rem;
        margin-top: 1.25rem;
    }

    #estoqueDots > span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--gray-300);
        transition: width 0.35s var(--transition), background 0.35s var(--transition);
    }

    #estoqueDots > span.on {
        width: 18px;
        border-radius: 999px;
        background: var(--gray-900);
    }
}

/* ---- Tablet (≤ 1024px) ---- */
@media (max-width: 1024px) {
    .nav-logo-img {
        height: 46px;
    }
}

/* ---- Mobile (≤ 768px) ---- */
@media (max-width: 768px) {
    .nav {
        padding: 1rem 1.5rem;
    }

    .nav.scrolled {
        padding: 0.875rem 1.5rem;
    }

    .nav-logo-img {
        height: 42px;
    }

    .mobile-menu-inner {
        gap: 1.75rem;
    }

    .mobile-link {
        font-size: 1.75rem;
    }

    .spec-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery-thumb {
        width: 70px;
    }

    .whatsapp-float {
        bottom: calc(1.5rem + env(safe-area-inset-bottom));
        right: 1.5rem;
    }
}

/* ---- Mobile compacto (≤ 640px) ---- */
@media (max-width: 640px) {
    /* Tipografia */
    .hero-title {
        font-size: clamp(3rem, 13vw, 5rem);
    }

    .section-title {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .destaque-title {
        font-size: clamp(2.25rem, 9vw, 3.5rem);
    }

    .sobre-title {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .cta-title {
        font-size: clamp(2.25rem, 10vw, 3.75rem);
    }

    .v-model {
        font-size: clamp(2rem, 8vw, 3.25rem);
    }

    .veiculos-title {
        font-size: clamp(2.25rem, 8vw, 3.25rem);
    }

    .vehicle-section-title {
        font-size: clamp(1.75rem, 7vw, 2.5rem);
    }

    .vehicle-cta-title {
        /* O teto era 3rem, e ai o titulo ficava MAIOR quanto maior a tela
           dentro desta faixa: 48px em 600px de viewport, e 40px em 768px,
           porque a regra seguinte (que vale acima de 640px) tem piso de 2.5rem.
           Com o teto em 2.5rem as duas faixas batem em 40px e a escala cresce
           de forma continua. */
        font-size: clamp(2rem, 8vw, 2.5rem);
    }

    .vehicle-desc {
        font-size: clamp(1.125rem, 4.5vw, 1.375rem);
        max-width: 100%;
    }

    /* Containers */
    .estoque,
    .experiencia,
    .destaque,
    .sobre {
        padding: 3.5rem 1.5rem;
    }

    .experiencia-header {
        margin-bottom: 2.5rem;
    }

    .destaque-specs {
        gap: 1.5rem;
    }

    .destaque-title,
    .destaque-price {
        margin-bottom: 1.5rem;
    }

    .destaque-visual {
        aspect-ratio: 16 / 9;
    }

    .cta-title {
        margin-bottom: 1.25rem;
    }

    .cta-desc {
        font-size: 1rem;
        margin-bottom: 2rem;
    }

    .cta .btn-blue,
    .cta .btn-secondary {
        padding: 1rem 1.5rem;
    }

    .sobre-ctas {
        margin-top: 1.5rem;
    }

    /* Acompanha o padding e o gap encolhidos do card compacto em 768px: o
       segundo .stat precisa de padding-left igual ao gap, senao a linha do
       meio fica torta - 1.5rem de um lado e 1.25rem do outro. */
    .sobre-stats .stat + .stat {
        padding-left: 1.25rem;
    }

    .step-content h3 {
        font-size: 1.0625rem;
    }

    /* Hero */
    .hero-content {
        padding: 0 1.5rem;
    }

    .hero-scroll {
        bottom: 1.25rem;
    }

    /* Cards e grids */
    .estoque-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .related-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .vehicle-info {
        padding: 1.25rem;
    }

    .vehicle-model {
        font-size: 1.125rem;
        margin: 0.375rem 0;
    }

    .vehicle-specs {
        font-size: 0.7813rem;
        flex-wrap: wrap;
        row-gap: 0.375rem;
    }

    .vehicle-price {
        font-size: 1.0625rem;
        margin-bottom: 0.75rem;
    }

    .vehicle-card .btn-vehicle {
        width: 100%;
        justify-content: center;
        padding: 0.75rem 1.25rem;
    }

    .estoque-footer {
        margin-top: 1.5rem;
    }

    .estoque-footer .btn-vehicle-lg {
        width: 100%;
        justify-content: center;
    }

    .filter-btn {
        padding: 0.75rem 1.25rem;
    }

    /* Filtros touch */
    .filter-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
        padding: 0.75rem 1.5rem;
        background: var(--white);
        border: 1px solid var(--gray-300);
        border-radius: 100px;
        font-family: var(--font-secondary);
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--gray-800);
        cursor: pointer;
        margin-bottom: 1rem;
        transition: all 0.3s var(--transition);
    }

    .filter-toggle svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    .filter-toggle:hover {
        border-color: var(--gray-500);
    }

    .filter-toggle.active {
        background: var(--gray-900);
        border-color: var(--gray-900);
        color: var(--white);
    }

    .filter-bar {
        display: none;
    }

    .filter-bar.open {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
    }

    .filter-select {
        width: 100%;
        min-width: 0;
        flex: 1 1 auto;
    }

    .filter-clear {
        padding: 0.625rem 1rem;
        text-align: center;
    }

    /* Página do veículo */
    .vehicle-hero {
        padding: 6.5rem 1.5rem 2.5rem;
        gap: 2rem;
    }

    .vehicle-back {
        top: 5rem;
        left: 1.5rem;
        font-size: 0.8125rem;
    }

    .v-specs {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    .vehicle-panel .btn-primary {
        width: 100%;
        justify-content: center;
    }

    .vehicle-specs-section,
    .vehicle-desc-section,
    .vehicle-gallery-section,
    .vehicle-videos-section,
    .vehicle-cta-section,
    .vehicle-related-section {
        padding: 3.5rem 0;
    }

    .vehicle-section-inner {
        padding: 0 1.5rem;
    }

    .spec-card {
        padding: 1.25rem;
        gap: 0.375rem;
    }

    .spec-card-value {
        font-size: 1.125rem;
    }

    .vehicle-section-title {
        margin-bottom: 2rem;
    }

    .highlight-pills {
        margin-top: 1.5rem;
    }

    .editorial-gallery {
        gap: 1rem;
    }

    .vehicle-cta-inner {
        padding: 3rem 1.5rem;
    }

    /* Estoque */
    .veiculos-header {
        padding: 6.5rem 0 1.5rem;
    }

    .veiculos-header-inner {
        padding: 0 1.5rem;
    }

    .veiculos-stock-inner {
        padding: 1.5rem 1.5rem 4rem;
    }

    .stock-count {
        margin-bottom: 1.25rem;
    }

    .filter-bar {
        margin-bottom: 1.5rem;
    }

    /* Rodapé */
    .footer {
        padding: 3.5rem 0 0;
    }

    .footer-inner {
        padding: 0 1.5rem;
    }

    .footer-grid {
        gap: 2rem;
        padding-bottom: 2rem;
    }

    .footer-logo-img {
        width: 130px;
    }

    .footer-bottom {
        padding: 1.25rem 0 calc(1.25rem + env(safe-area-inset-bottom));
    }
}

/* ---- Smartphones (≤ 430px) ---- */
@media (max-width: 430px) {
    .nav {
        padding: 0.75rem 1.25rem;
    }

    .nav.scrolled {
        padding: 0.75rem 1.25rem;
    }

    .nav-logo-img {
        height: 38px;
    }

    .nav-menu-btn span {
        width: 20px;
    }

    .mobile-link {
        font-size: 1.5rem;
    }

    .hero-title {
        font-size: clamp(2.5rem, 13vw, 3.4rem);
    }

    .section-title {
        font-size: clamp(1.75rem, 8vw, 2.25rem);
    }

    .destaque-title {
        font-size: clamp(1.75rem, 9vw, 2.5rem);
    }

    .sobre-title {
        font-size: clamp(1.75rem, 8vw, 2.25rem);
    }

    .cta-title {
        font-size: clamp(1.75rem, 10vw, 2.5rem);
    }

    .v-model {
        font-size: clamp(1.5rem, 8vw, 2rem);
    }

    .veiculos-title {
        font-size: clamp(1.875rem, 8vw, 2.5rem);
    }

    .vehicle-section-title {
        font-size: clamp(1.5rem, 7vw, 1.875rem);
    }

    .vehicle-cta-title {
        font-size: clamp(1.75rem, 8vw, 2.25rem);
    }

    .estoque,
    .experiencia,
    .destaque,
    .sobre {
        padding: 3rem 1.25rem;
    }

    .hero-content {
        padding: 0 1.25rem;
    }

    .cta-card {
        width: calc(100% - 2.5rem);
        padding: 2.75rem 1.25rem;
    }

    .hero-scroll {
        bottom: 1.25rem;
    }

    .footer-inner,
    .vehicle-section-inner,
    .veiculos-header-inner {
        padding: 0 1.25rem;
    }

    /* O .vehicle-cta-inner tambem tem .vehicle-section-inner (veiculo.js),
       entao a regra acima zera o padding vertical do card: medido, o card
       ficava com "0px 20px", encostando nas bordas da tela e com o ultimo
       filho (o link de voltar) terminando exatamente na altura do card.
       Mesma especificidade, mas declarado depois - por isso volta aqui. */
    .vehicle-cta-inner {
        width: calc(100% - 2.5rem);
        margin: 0 auto;
        padding: 2.5rem 1.25rem;
    }

    .veiculos-stock-inner {
        padding: 1.25rem 1.25rem 3.5rem;
    }

    .veiculos-header {
        padding: 6rem 0 1.25rem;
    }

    .vehicle-hero {
        padding: 6rem 1.25rem 2rem;
        min-height: auto;
    }

    .gallery-main {
        max-height: 50vh;
    }

    .gallery-main-img {
        max-height: 50vh;
    }

    .vehicle-back {
        top: 5rem;
        left: 1.25rem;
    }

    .spec-cards {
        grid-template-columns: 1fr;
    }

    .gallery-thumb {
        width: 56px;
    }
}

/* ---- Telas muito pequenas (≤ 360px) ---- */
@media (max-width: 360px) {
    .hero-title {
        font-size: clamp(2.25rem, 13vw, 2.9rem);
    }

    .cta-title {
        font-size: clamp(1.625rem, 10vw, 2rem);
    }

    .v-model {
        font-size: 1.5rem;
    }

    .gallery-thumb {
        width: 48px;
    }
}

/* ============================================================
   NOVAS SEÇÕES: Serviços, Por que a Prime Drive, FAQ
   ============================================================ */

/* --- Serviços --- */
/* "Como a Prime Drive ajuda voce" em azul, com varios tons e degrade nas
   duas pontas.

   Os dois degrades sao camadas separadas de 64px de altura, e nao paradas em
   porcentagem do gradiente. A secao muda muito de altura conforme o viewport
   (no celular os 3 cards empilham e ela dobra de tamanho), e um degrade em
   porcentagem acompanharia isso e atravessaria o titulo. Com 64px fixos o
   degrade cabe sempre dentro do padding de 6rem.

   64px e nao os 120px que estavam antes: pedido de degrade mais leve. Medido,
   120px de cada lado somavam 240px de faixa clara, quase um quarto da altura
   util de uma viewport de 853px, e o azul da secao sumia antes de chegar no
   primeiro card - lia como uma faixa branca, nao como uma transicao. Com 64px
   a emenda continua invisivel e o azul aparece logo abaixo do padding.

   As cores das pontas casam com as secoes vizinhas: #ffffff e a do "Estoque",
   logo acima, e #f8f9fa e a da "Experiencia", logo abaixo. Sem isso
   apareceria uma emenda visivel onde o azul encontra o branco. */
.servicos {
    background:
        linear-gradient(0deg, #f8f9fa 0%, rgba(248, 249, 250, 0) 100%) bottom / 100% 64px no-repeat,
        linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%) top / 100% 64px no-repeat,
        linear-gradient(180deg,
            #1d4ed8 0%,
            #2563eb 22%,
            #1d4ed8 44%,
            #3b82f6 66%,
            #2563eb 86%,
            #1d4ed8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7.5rem 3rem;
    /* A secao ocupa a tela inteira do dispositivo na altura. A regra base
       .section ja trazia min-height: 100vh, que no celular mede a viewport sem
       a barra do navegador; 100svh e a menor dos dois e evita a barra de
       endereco cortando o ultimo card. */
    min-height: 100svh;
}

/* Titulo e intro ficam sobre o azul, entao vao de branco. */
.servicos .section-title {
    color: var(--white);
}

.servicos .section-intro {
    color: rgba(255, 255, 255, 0.92);
}

.servicos-content {
    max-width: 1400px;
    width: 100%;
}

.servicos-header {
    margin-bottom: 3rem;
    max-width: 720px;
}

.section-intro {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--gray-600);
    margin-bottom: 1.5rem;
}

.servicos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.servico-card {
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: all 0.4s var(--transition);
}

.servico-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.07);
    border-color: var(--gray-300);
}

.servico-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: rgba(37, 99, 235, 0.1);
    color: var(--blue);
}

.servico-icon svg {
    width: 26px;
    height: 26px;
}

.servico-card h3 {
    font-family: var(--font-primary);
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--gray-900);
}

.servico-card p {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--gray-600);
    flex: 1;
}

.servico-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--blue);
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.3s var(--transition);
}

.servico-link svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s var(--transition);
}

.servico-link:hover {
    color: var(--blue-dark);
}

.servico-link:hover svg {
    transform: translateX(4px);
}

/* --- Por que a Prime Drive --- */
/* Fundo branco. A secao nasceu clara sobre escuro (gradiente gray-900 ->
   gray-800), entao inverter o fundoobriga a inverter o texto junto - senao
   o conteudo fica branco sobre branco. As cores usam os mesmos tokens das
   outras secoes brancas: titulo gray-900, texto muted gray-600, caixa
   gray-100 sobre borda gray-200, acento blue. O accent tambem sai de
   --blue-light (claro demais no branco) para --blue.

   Filete no topo: o "Sobre" acima tambem e branco, entao as duas secoes
   viravam um bloco branco unico de ~12rem sem nenhuma marca de onde uma
   acaba e a outra comeca. Um fio de 1px no token --gray-200 (o mesmo das
   bordas de card do projeto) separa sem mudar o fundo nem a paleta. */
.porque {
    background: var(--white);
    color: var(--gray-900);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7.5rem 3rem;
}

.porque-content {
    max-width: 1400px;
    width: 100%;
}

.porque-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 4rem;
    align-items: start;
}

.porque-tag {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 1rem;
}

.porque-title {
    font-family: var(--font-primary);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 400;
    color: var(--gray-900);
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.porque-text {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--gray-600);
}

.porque-story {
    margin-top: 2rem;
    padding: 1.75rem 2rem;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-left: 3px solid var(--blue);
    border-radius: var(--radius-md);
}

.porque-story p {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--gray-700);
}

.porque-pillars {
    display: grid;
    gap: 1.75rem;
}

.pillar {
    border-left: 2px solid var(--blue);
    padding-left: 1.375rem;
}

.pillar h3 {
    font-family: var(--font-secondary);
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 0.375rem;
}

.pillar p {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--gray-600);
}

/* --- FAQ --- */
.faq {
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7.5rem 3rem;
}

.faq-content {
    max-width: 1400px;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(300px, 420px) 1fr;
    gap: 4rem;
    align-items: start;
}

.faq-info {
    position: sticky;
    top: 7rem;
}

.faq-list {
    margin-top: 0;
}

.faq-item {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    margin-bottom: 0.75rem;
    overflow: hidden;
    transition: border-color 0.3s var(--transition), box-shadow 0.3s var(--transition);
}

.faq-item.open {
    border-color: var(--gray-300);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-secondary);
    font-size: 1rem;
    font-weight: 500;
    color: var(--gray-900);
    text-align: left;
    transition: color 0.3s var(--transition);
}

.faq-question:hover {
    color: var(--blue);
}

.faq-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--blue);
    transition: transform 0.3s var(--transition);
}

.faq-item.open .faq-icon {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s var(--transition);
}

.faq-answer-inner {
    padding: 0 1.5rem 1.5rem;
    color: var(--gray-600);
    font-size: 0.9375rem;
    line-height: 1.7;
}

/* --- Responsivo das novas seções --- */
@media (max-width: 1024px) {
    .servicos {
        padding: 4rem 2rem;
    }

    .porque {
        padding: 4rem 2rem;
    }

    .faq {
        padding: 4rem 2rem;
    }
}

@media (max-width: 768px) {
    .servicos-grid {
        grid-template-columns: 1fr;
    }

    .porque-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .faq-content {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .faq-info {
        position: static;
    }

    .servicos,
    .porque,
    .faq {
        padding: 4rem 1.5rem;
    }
}

/* ============================================================
   CARREGANDO VEICULO
   Mostrado em veiculo.html enquanto os dados chegam do Supabase.
   ============================================================ */
.vehicle-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 60vh;
    color: var(--gray-600);
    font-size: 0.95rem;
}

.vehicle-loading-spinner {
    width: 42px;
    height: 42px;
    border: 3px solid var(--gray-300);
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: pd-spin 0.8s linear infinite;
}

@keyframes pd-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   ESTOQUE E QUEM SOMOS | COLADO NO CARROSSEL, SEÇÕES MAIS JUNTAS
   ============================================================
   Este bloco fica no fim do arquivo de proposito. As regras antigas de
   padding vivem em quatro media queries diferentes (a base, 768px, 640px e
   430px) e as ultimas sobrescrevem as primeiras por ordem de arquivo. Como
   aqui so interessa reduzir o vao, em vez de reescrever cada atalho, o bloco
   inteiro foi posto depois de todos: mesmo peso, ultimo a falar.
   .sobre e .estoque sao escritas sem # porque nao ha um id nao conflitante
   para elas; #estoque recebe o id porque precisa vencer o .section. */

#estoque {
    /* A seção para de se forçar a uma tela inteira.

       Isso e consequencia, e nao um pedido aesthetic: com o grid em
       flex: 0 0 auto ele nao estica mais, entao a sobra da min-height
       100svh do .section cairia no PE da seção, embaixo do botao - e o vao
       entre o botao e o "Quem somos" pioraria em vez de melhorar. Medido a
       1296px: sobrariam 170px abaixo do botao contra os 96px de antes.

       E o que torna o vao entre as duas secoes previsivel: com
       min-height ele dependia da altura da janela, ou seja o mesmo site
       abria com folgas diferentes em telas diferentes.

       As outras secoes continuam tela cheia - so o Estoque deixa de forçar. */
    min-height: 0;
    padding-bottom: 5rem;
}

.sobre {
    padding-top: 3rem;
}

/* O botao "Ver todos os veiculos" colado no carrossel. A base deixava
   0.1rem e o desktop 3rem; 1.5rem e um respiro de proposito - colado de
   verdade ficaria indistinguivel de mais um card. */
.estoque-footer {
    margin-top: 1.5rem;
}

/* A faixa de texto é a única coisa entre o "Por que a Prime Drive" e as
   perguntas frequentes, então o respiro das duas seções encosta nela em vez
   de sobrar dos dois lados: com os 7.5rem delas aparecia 120px de branco
   acima e abaixo da faixa, e o que ligava uma seção à outra era o vazio, e
   não a faixa.

   A fita é desenhada logo depois do conteúdo do #porque, então é o
   padding-bottom de lá que decide a distância entre o texto e a fita - e o
   padding-top do #faq decide o espaço entre a fita e o título das
   perguntas. Para a fita ficar no meio, o espaço de baixo é maior que o de
   cima: 1rem embaixo e 2.5rem em cima.

   Medido a 390px com o desenho ja corrigido: 12px acima da fita e 32px
   abaixo, contra 17 e 8 antes. Os 20px a mais embaixo sao o que puxa a
   fita para o meio do vao, e nao para o topo dele.

   Fora do celular a diferença é a mesma em uns 8px, mas ali o #porque é
   tela cheia e sobra espaço vazio dentro dele (medido 233px embaixo do
   conteudo), então a fita ainda aparece mais abaixo do meio do vao. Ver
   o bloco do pin para o resto. */
.porque {
    padding-bottom: 1rem;
}

.faq {
    padding-top: 2.5rem;
}

/* FAQ e o CTA final: o convite vem logo depois das perguntas. Só o
   padding-bottom, porque o que ainda resta entre os dois é o do topo do
   próprio .cta, e mexer aqui é o que fecha o vão. Ver a medida no bloco
   de espaçamento do mobile. */
.faq {
    padding-bottom: 3rem;
}

/* ============================================================
   ESPAÇAMENTO ENTRE SEÇÕES NO MOBILE
   ============================================================
   As seções vinham com 4rem de padding em cima e embaixo no celular, o que
   dava 128px de branco entre o fim de uma e o começo da próxima. Com 5rem sobe
   para 160px: o conteúdo respira e as seções param de parecer coladas, que
   era o pedido.

   Não é 5rem em todo mundo. Duas exceções, e ambas por causa do que vem ao
   lado:

   - .porque e .faq têm o padding-bottom / padding-top do bloco de cima
     (1rem e 2.5rem) porque a faixa de texto rolando entra entre as duas.
     Aumentar aqui abriria um vão em volta da faixa, e a faixa é justamente o
     que liga uma seção à outra.
   - .faq não ganha o 5rem embaixo, porque o que vem depois dela é o CTA
     final, e um vão grande ali joga o convite para longe. São 1rem no celular
     e 3rem no desktop: medido a 1296px, os 7.5rem da base deixavam 344px entre
     a última pergunta e o card do convite, quase uma tela inteira de rolagem
     para chegar nele. Não é zero de propósito - colada sem folga nenhuma, a
     última resposta grudaria no card.

   Por que 5rem e não 6rem: a 390x844, 5rem + 5rem = 160px já é quase um
   quinto da altura da tela. Com 6rem seriam 192px, e a seção "Destaque", que
   já é a mais alta, passaria a não caber numa dobra só. */
@media (max-width: 768px) {
    .sobre,
    .servicos,
    .experiencia,
    .destaque {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    /* O topo do Estoque é a entrada da seção de estoque, que é a primeira
       com conteúdo real depois do hero. Mantém 4rem: o hero já é uma tela
       inteira, e mais 1rem aqui empurra o grid para fora da primeira
       dobra. */
    #estoque {
        padding-bottom: 5rem;
    }

    /* FAQ entrega o CTA quase colado. */
    .faq {
        padding-bottom: 1rem;
    }
}

@media (max-width: 768px) {
    #estoque {
        padding-bottom: 2.5rem;
    }

    .sobre {
        padding-top: 2.5rem;
    }

    .estoque-footer {
        margin-top: 1.25rem;
    }

    /* O indicador de posicao do carrossel tambem encosta: 0.75rem em vez
       de 1.25rem. Do card ate o botao fica 12 + 6 + 20 = 38px a 390px,
       contra 230px medidos. */
    #estoqueDots {
        margin-top: 0.75rem;
    }
}

/* ============================================================
   FAIXA DE TEXTO ROLANTE | ENTRE O "POR QUE" E AS PERGUNTAS
   ============================================================
   Faixa sem fundo: o texto branco nao precisa de um fundo escuro atras
   porque ele e desenhado SOBRE a fita, e a fita e o proprio caminho do SVG
   desenhado com stroke. A fita e o fundo do texto, e e por isso que ela
   precisa ser larga o bastante para conter as letras - 94 contra um texto de
   56 deixa 19 de folga de cada lado. Com o branco da fita a 6,79:1 e o texto
   branco sobre ela a 6,79:1 tambem, entao o contraste nao depende do fundo da
   pagina: trocar a cor de fundo nao torna o texto ilegiveis.

   As cores, a curva, a espessura e a fonte sao lidas dos atributos
   data-* do elemento pelo main.js (initFaixaTexto), e nao moram aqui: elas
   sao propriedades do componente, nao do tema do site.

   O SVG e montado pelo main.js porque antes de posicionar
   o texto ele precisa de duas medidas que so existem no navegador: o
   comprimento do caminho (getTotalLength) e a largura do texto de
   referencia (getComputedTextLength). A repeticao sai da divisao entre as
   duas - cabem N copias inteiras do texto no caminho.

   O viewBox e 1280x280 e o texto vive em 56px dentro dele, ou seja 4,4% da
   largura. Como o SVG escala com a largura da tela, essa proporcao e
   mantida em qualquer tamanho: a 390px o texto sai com 17px numa faixa de
   85px, e a 1400px com 61px numa faixa de 306px.

   preserveAspectRatio fica em meet, e nao slice: o texto e esticado para
   ocupar o comprimento INTEIRO do caminho, entao cortar a imagem com slice
  ampliaria as letras e mostraria duas ou tres em vez da frase inteira. */
.textloop {
    overflow: hidden;
}

.text-loop {
    position: relative;
    width: 100%;
    overflow: hidden;
    font-family: var(--font-primary);
    /* Cor da fita, lida pelo main.js em initFaixaTexto. Aponta para a paleta do
       site de propósito: trocar --blue aqui troca a fita junto, e o texto
       branco continua sobre um azul da casa. A 5,17:1 com branco, passa
       AA. Um atributo data-cor-fita no HTML sobrescreve este valor, se
       algum dia a fita precisar de uma cor fora da paleta. */
    --pd-faixa-fita: var(--blue);
}

.text-loop-svg {
    display: block;
    width: 100%;
    height: auto;
}

.text-loop-text {
    user-select: none;
}

.text-loop-measure {
    visibility: hidden;
    pointer-events: none;
}

/* ============================================================
   CARROSSEL DE DESTAQUES | BLUR NA ENTRADA E NA SAIDA
   ============================================================
   O blur e por card, e o valor vem de uma variavel que o main.js escreve
   (initBlurCarrossel). Sem JS - ou acima de 768px, onde a grade de
   destaques nao e carrossel e sim quatro cards lado a lado - a variavel
   nao existe e o filtro vale zero, que e o estado de repouso. Por isso
   filter: blur(var(--pd-blur, 0px)): um card sem nada escrito nele
   continua nitido.

   A sombra suave embaixo do card acompanha o mesmo valor, com metade da
   intensidade: um cartao desfocado com sombra dura parece recorte, e nao
   profundidade. */
#featuredGrid .vehicle-card {
    filter: blur(var(--pd-blur, 0px));
    box-shadow: 0 10px 30px rgba(17, 24, 39, calc(var(--pd-blur, 0px) / 12));
    transition: box-shadow 0.2s var(--transition);
}