/* ==========================================================================
   COMPLA CLUB — layout e componentes (v2)
   Consome tokens-v2.css. Nunca escreva hex nem nome de fonte aqui.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Movimento reduzido derruba o trilho preso ao scroll das categorias, igual ao
   que o breakpoint de 991px faz. O main-v2.js checa a mesma media query. */
@media (prefers-reduced-motion: reduce) {
    .categorias__pista { height: auto; }
    .categorias__palco { position: static; height: auto; overflow: visible; }
    .categorias__trilho { overflow-x: auto; scroll-snap-type: x mandatory; }
    .categoria { scroll-snap-align: start; }
}

body {
    margin: 0;
    background: var(--concreto-fundo);
    color: var(--tinta);
    font-family: var(--fonte);
    font-variation-settings: 'wdth' var(--wdth-corpo), 'wght' 400;
    font-size: var(--fs-corpo);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible {
    outline: 3px solid var(--vermelho-vivo);
    outline-offset: 3px;
}

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

/* --- Tipo dos títulos: Archivo estreitada e pesada ---------------------- */
h1, h2, h3, .display {
    font-variation-settings: 'wdth' var(--wdth-titulo), 'wght' 800;
    line-height: .95;
    letter-spacing: -.015em;
    margin: 0;
    text-wrap: balance;
}

/* Números de preço alinham em coluna. */
.tabular { font-variant-numeric: tabular-nums; }

/* --- Botões ------------------------------------------------------------
   Retangulares, sentence case. O site antigo tinha tudo em caixa alta com
   letter-spacing, que é o tique mais visível de template. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 28px;
    border: 2px solid transparent;
    border-radius: var(--raio);
    font-family: inherit;
    font-size: 16px;
    font-variation-settings: 'wdth' 92, 'wght' 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
                border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
}

/* O botão principal é cor cheia, não vidro, mas leva o mesmo acabamento de
   material: luz na aresta de cima, sombra na de baixo e uma sombra colorida
   por fora. É o que a Apple faz com o botão "tinted". */
.btn--cheio {
    background: linear-gradient(180deg, var(--vermelho-vivo), var(--vermelho));
    border-color: transparent;
    color: var(--sobre-escuro);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28),
                inset 0 -1px 0 rgba(0, 0, 0, .25),
                var(--sombra-vermelha);
}
.btn--cheio:hover {
    background: linear-gradient(180deg, var(--vermelho-vivo), var(--vermelho-vivo));
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35),
                inset 0 -1px 0 rgba(0, 0, 0, .25),
                0 16px 32px -12px rgba(175, 29, 29, .75);
}
.btn--cheio:active { transform: translateY(0) scale(.99); }

.btn--linha {
    background: transparent;
    border-color: var(--tinta);
    color: var(--tinta);
}
.btn--linha:hover { background: var(--tinta); color: var(--papel); }

.btn--claro {
    background: transparent;
    border-color: var(--sobre-escuro);
    color: var(--sobre-escuro);
}
.btn--claro:hover { background: var(--sobre-escuro); color: var(--marinho); }

.btn svg { width: 18px; height: 18px; fill: currentColor; }

/* ==========================================================================
   CABEÇALHO
   Barra escura translúcida, fixa, que se esconde ao rolar para baixo e volta
   ao rolar para cima. A forma veio da barra da motochefebrasil.com.br: filete
   colorido no topo, bloco da marca separado do menu por um chanfro diagonal e
   uma pílula à direita. As cores e a fonte são as nossas.

   A barra é FIXA, não sticky: ela flutua sobre o conteúdo e não empurra nada.
   Quem paga o espaço dela é o padding-top do .hero, com --topo-altura.
   ========================================================================== */

.topo {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 60;
    transform: translateY(0);
    transition: transform .35s var(--ease);
}

/* Some ao rolar para baixo. A classe é posta pelo main-v2.js. */
.topo--oculto { transform: translateY(-100%); }

/* O filete do topo. Vermelho cheio à esquerda, dissolvendo para a direita:
   é o que dá o acabamento sem pintar a barra inteira de vermelho. */
.topo__filete {
    height: 5px;
    background: linear-gradient(90deg,
        var(--vermelho) 0%,
        var(--vermelho) 26%,
        rgba(175, 29, 29, .35) 58%,
        rgba(175, 29, 29, 0) 100%);
}

/* A barra em si, em Liquid Glass (09/09/2026). O fundo é bem translúcido de
   propósito: o conteúdo passa por trás e o blur com saturação faz o vidro. A
   opacidade de .64 é o mínimo que mantém o texto branco em 4.5:1 sobre o
   trecho mais claro da página (o hero, que é quase branco). Navegador sem
   backdrop-filter cai no fundo sólido. */
.topo__barra {
    display: flex;
    align-items: stretch;
    min-height: var(--topo-altura);
    background: var(--vidro-solido);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 12px 32px -18px rgba(0, 0, 0, .6);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .topo__barra {
        background: linear-gradient(180deg, rgba(10, 22, 36, .64), rgba(10, 22, 36, .76));
        -webkit-backdrop-filter: blur(var(--vidro-blur)) saturate(170%);
        backdrop-filter: blur(var(--vidro-blur)) saturate(170%);
    }
    /* Refração de verdade, só no Chromium. A classe .refrata é posta pelo
       main-v2.js quando detecta navigator.userAgentData, que só existe lá:
       Safari e Firefox aceitariam a sintaxe e descartariam o blur junto. O
       filtro #vidro-refrata está no HTML das duas páginas. */
    .refrata .topo__barra {
        -webkit-backdrop-filter: blur(var(--vidro-blur)) saturate(170%) url(#vidro-refrata);
        backdrop-filter: blur(var(--vidro-blur)) saturate(170%) url(#vidro-refrata);
    }
}

/* --- Bloco da marca ---
   Palco claro para a logo, que é marinho e vermelha e sumiria no escuro. O
   canto inferior direito é cortado na diagonal; a faixa do menu tem o corte
   espelhado e as duas se encaixam. */
.topo__marca {
    display: flex;
    align-items: center;
    flex: none;
    padding: 10px clamp(24px, 3vw, 44px) 10px var(--calha);
    background: var(--papel);
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--topo-chanfro)) 100%, 0 100%);
}
.topo__marca img {
    width: clamp(118px, 12vw, 158px);
    height: auto;
}

/* --- Faixa do menu ---
   A lâmina de vidro: um degrau de claridade acima da barra, fio de luz na
   aresta de cima, sombra na de baixo e um reflexo que escorre do topo (o
   ::before). O clip-path corta o ::before junto, então o reflexo respeita o
   chanfro. */
.topo__faixa {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.6vw, 28px);
    flex: 1;
    min-width: 0;
    padding-right: var(--calha);
    padding-left: calc(var(--topo-chanfro) + 12px);
    background: var(--vidro-fundo);
    box-shadow: inset 0 1px 0 var(--vidro-brilho),
                inset 0 -1px 0 rgba(0, 0, 0, .22);
    clip-path: polygon(var(--topo-chanfro) 0, 100% 0, 100% 100%, 0 100%);
}
.topo__faixa::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, .16) 0%,
        rgba(255, 255, 255, .05) 38%,
        rgba(255, 255, 255, 0) 62%);
}

.menu { margin-inline: auto; }
.menu ul {
    display: flex;
    align-items: center;
    gap: clamp(2px, .5vw, 8px);
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Cada link é uma pílula de vidro que só aparece no hover: fundo mais claro,
   fio de luz em cima e sombra curta por fora, como um botão que sobe. */
.menu a {
    display: block;
    text-decoration: none;
    white-space: nowrap;
    font-size: clamp(13px, 1.05vw, 16px);
    /* Largura 96, não 74: o Arthur achou os nomes estreitos demais (09/09). */
    font-variation-settings: 'wdth' 96, 'wght' 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sobre-escuro);
    padding: 9px clamp(9px, .9vw, 14px);
    border-radius: 999px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
                transform var(--dur) var(--ease);
}
/* No hover o link afunda no vidro em vez de subir: é o 3D invertido que o
   Arthur pediu. O main-v2.js (data-inclina="inverso") inclina a pílula para o
   lado oposto do mouse; sem JS fica só o afundar daqui. */
.menu a:hover {
    background: var(--vidro-fundo-hover);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35),
                inset 0 -1px 0 rgba(255, 255, 255, .22);
    transform: scale(.97);
}

/* --- Pílula "Menu" ---
   No desktop e no celular ela faz a mesma coisa: abre o painel com os links.
   O rótulo some abaixo de 380px, sobra só o traço. */
.menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex: none;
    padding: 12px 20px;
    background: var(--vidro-fundo);
    border: 1px solid var(--vidro-borda);
    border-radius: 999px;
    color: var(--sobre-escuro);
    font-family: inherit;
    font-size: 15px;
    font-variation-settings: 'wdth' 100, 'wght' 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: inset 0 1px 0 var(--vidro-brilho),
                inset 0 -1px 0 rgba(0, 0, 0, .22),
                0 10px 22px -12px rgba(0, 0, 0, .7);
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
                transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.menu-toggle:hover {
    background: var(--vidro-fundo-hover);
    border-color: rgba(255, 255, 255, .40);
    transform: translateY(-1px) scale(1.02);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75),
                inset 0 -1px 0 rgba(0, 0, 0, .22),
                0 16px 30px -12px rgba(0, 0, 0, .7);
}
.menu-toggle:active { transform: scale(.98); }

.menu-toggle__barras,
.menu-toggle__barras::before,
.menu-toggle__barras::after {
    display: block;
    width: 22px; height: 2px;
    background: currentColor;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.menu-toggle__barras { position: relative; background: transparent; }
.menu-toggle__barras::before,
.menu-toggle__barras::after {
    position: absolute; left: 0;
    content: '';
}
.menu-toggle__barras::before { transform: translateY(-4px); }
.menu-toggle__barras::after  { transform: translateY(4px); }
.menu-toggle[aria-expanded="true"] .menu-toggle__barras::before { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__barras::after  { transform: rotate(-45deg); }

/* --- Painel do menu ---
   O mesmo painel no desktop e no celular. Fica dentro da .topo__faixa, ancorado
   no canto direito, e some com display:none quando fechado. */
.menu__painel {
    display: none;
    position: absolute;
    top: calc(var(--topo-altura) + 5px);
    right: var(--calha);
    z-index: 61;
    width: min(320px, calc(100vw - var(--calha) * 2));
    padding: 14px 22px 22px;
    background: var(--vidro-solido);
    border: 1px solid var(--vidro-borda);
    border-radius: var(--raio-card);
    box-shadow: inset 0 1px 0 var(--vidro-brilho),
                inset 1px 0 0 rgba(255, 255, 255, .10),
                inset 0 -1px 0 rgba(0, 0, 0, .3),
                0 30px 70px -20px rgba(0, 0, 0, .7);
}
.menu__painel.aberto { display: block; }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .menu__painel {
        background: linear-gradient(180deg, rgba(10, 22, 36, .74), rgba(10, 22, 36, .84));
        -webkit-backdrop-filter: blur(22px) saturate(170%);
        backdrop-filter: blur(22px) saturate(170%);
    }
}
.menu__painel ul {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}
/* O :not(.btn) protege o botão de WhatsApp lá do fim, que é um <a> e nasceria
   em caixa alta e sem fundo com a regra genérica. */
.menu__painel a:not(.btn) {
    display: block;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    font-size: 16px;
    font-variation-settings: 'wdth' 82, 'wght' 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--sobre-escuro);
}
.menu__painel li:last-child a { border-bottom: 0; }
.menu__painel .btn { width: 100%; margin-top: 4px; }

/* ==========================================================================
   HERO
   Faixa larga e baixa, não tela inteira, e sem carrossel. Desde 10/09/2026
   a foto é um banner interativo: cada veículo é um link (veja .hero__alvo).
   Referência: radpowerbikes.com
   ========================================================================== */

/* O padding-top paga o espaço da barra fixa. Sem ele o hero nasce por baixo
   dela. Se mudar --topo-altura, isto acompanha sozinho. */
.hero {
    /* Um degrau abaixo do branco, para o card da parcela (branco) ter de onde
       saltar. Sem borda embaixo: quem fecha o hero é a faixa "Sem CNH", que
       fica montada por cima da junção com a seção seguinte. */
    background: radial-gradient(120% 90% at 0% 0%, var(--papel) 0%, var(--concreto-fundo) 70%);
    padding-top: calc(var(--topo-altura) + 5px);
}

/* A coluna da foto é mais larga que a do texto (1.3 contra 1) e o texto é
   mais baixo do que era: quanto mais BAIXA e LARGA a janela da foto, mais da
   foto aparece. Com a proporção de hoje (~1.25) os três veículos cabem;
   abaixo de ~1.15 a scooter da esquerda começa a sair pela borda. */
.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    align-items: stretch;
    gap: 0;
    max-width: var(--container);
    margin-inline: auto;
}

.hero__texto {
    padding: clamp(28px, 3vw, 40px) var(--calha);
    align-self: center;
}

.hero__local {
    display: inline-block;
    margin-bottom: 22px;
    padding-bottom: 7px;
    border-bottom: 2px solid var(--vermelho);
    font-size: var(--fs-micro);
    font-variation-settings: 'wdth' 96, 'wght' 700;
    letter-spacing: .04em;
    color: var(--vermelho);
}

.hero h1 {
    font-size: var(--fs-mega);
    max-width: 15ch;    /* quebra em duas linhas, não três */
    margin-bottom: 20px;
}

.hero__apoio {
    max-width: 48ch;
    margin: 0 0 24px;
    font-size: var(--fs-lead);
    line-height: 1.45;
    color: var(--tinta-fraca);
}

/* --- O número da parcela: o ponto de audácia da página ------------------
   O site inteiro promete "cabe no seu mês". Aqui está o mês.
   Os dois valores são texto literal do catálogo oficial (CATALOGO-REAL.md). */
.parcela {
    display: block;
    /* Sem margem embaixo: o botão "Falar com o consultor" que vinha depois
       saiu em 10/09/2026 (o Arthur quis só o WhatsApp flutuante). */
    margin-bottom: 0;
    padding: 18px clamp(22px, 2.4vw, 32px) 18px clamp(18px, 2vw, 26px);
    border-left: 4px solid var(--vermelho);
    border-radius: var(--raio) var(--raio-card) var(--raio-card) var(--raio);
    background: var(--papel);
    box-shadow: var(--sombra-media), var(--brilho-topo);
}

.parcela__rotulo {
    display: block;
    margin-bottom: 4px;
    font-size: var(--fs-micro);
    font-variation-settings: 'wdth' 96, 'wght' 600;
    color: var(--tinta-fraca);
}
/* A modalidade, num selo: "No cartão" aqui, "consórcio" está na arte do
   outro destaque. É o que separa as duas formas de pagar no primeiro olhar. */
.parcela__modo {
    display: inline-block;
    margin-right: 6px;
    padding: 4px 9px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--marinho-claro), var(--marinho));
    color: var(--sobre-escuro);
    font-size: 11.5px;
    font-variation-settings: 'wdth' 96, 'wght' 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 4px 10px -5px rgba(16, 30, 44, .6);
}

.parcela__valor {
    display: block;
    font-size: var(--fs-numero);
    font-variation-settings: 'wdth' 74, 'wght' 800;
    font-variant-numeric: tabular-nums;
    line-height: .92;
    letter-spacing: -.02em;
    color: var(--tinta);
}
.parcela__valor .cifrao { color: var(--vermelho); }
.parcela__valor .ate {
    font-size: .42em;
    font-variation-settings: 'wdth' 100, 'wght' 500;
    color: var(--tinta-fraca);
    letter-spacing: 0;
}

.parcela__nota {
    display: block;
    margin-top: 8px;
    font-size: var(--fs-micro);
    color: var(--tinta-fraca);
}

/* --- O banner interativo (10/09/2026) -----------------------------------
   A .hero__foto é a janela; a .hero__mapa é a foto com a proporção exata
   dela (1672x941), colada na borda DIREITA e alta como a janela. O que sobra
   à esquerda (o terço escuro da foto) fica escondido pelo overflow. Como os
   alvos são filhos da .hero__mapa e posicionados em porcentagem, eles ficam
   em cima dos veículos em qualquer tamanho de tela, sem JS.

   Isto só vale enquanto a janela for mais ALTA que a proporção da foto
   (largura/altura < 1.78). No desktop a coluna do texto garante isso; no
   celular a própria janela tem aspect-ratio fixo (bloco RESPONSIVO). */
.hero__foto {
    position: relative;
    min-height: clamp(300px, 40vw, 520px);
    overflow: hidden;
    background: var(--marinho);
}
.hero__mapa {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    aspect-ratio: 1672 / 941;
}
.hero__mapa img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* A foto se dissolve na borda esquerda, em vez de encostar seca no texto, e
   ganha uma sombra interna embaixo para a faixa "Sem CNH" parecer que está
   na frente dela. O pointer-events:none deixa o clique chegar nos alvos. */
.hero__foto::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, var(--concreto-fundo) 0%, rgba(244, 246, 248, 0) 9%),
                linear-gradient(180deg, rgba(10, 22, 36, 0) 80%, rgba(10, 22, 36, .35) 100%);
}

/* Cada alvo é um <a> invisível do tamanho do veículo, com um rótulo de vidro
   e um ponto que pulsa no pé. As quatro variáveis vêm do style="" do HTML,
   em porcentagem da .hero__mapa. Sem os rótulos ninguém saberia que a foto
   é clicável: eles são a dica, e o hover acende a área toda. */
.hero__alvo {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    height: var(--h);
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 4%;
    border-radius: 18px;
    text-decoration: none;
    color: var(--sobre-escuro);
    transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.hero__alvo:hover,
.hero__alvo:focus-visible {
    background: rgba(255, 255, 255, .07);
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55), 0 0 40px rgba(255, 255, 255, .18);
}
.hero__alvo:focus-visible { outline-offset: 0; }

.hero__alvo-rotulo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 7px 12px 7px 9px;
    border-radius: 999px;
    background: rgba(10, 22, 36, .74);
    border: 1px solid rgba(255, 255, 255, .22);
    font-size: clamp(11px, 1vw, 13px);
    font-variation-settings: 'wdth' 92, 'wght' 700;
    letter-spacing: .02em;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 20px -8px rgba(0, 0, 0, .8);
    transform: translateY(0);
    transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .hero__alvo-rotulo {
        background: rgba(10, 22, 36, .48);
        -webkit-backdrop-filter: blur(10px) saturate(160%);
        backdrop-filter: blur(10px) saturate(160%);
    }
}
.hero__alvo:hover .hero__alvo-rotulo { transform: translateY(-3px); background: rgba(175, 29, 29, .82); }

/* O ponto vermelho que pulsa: é o que diz "toque aqui" antes de qualquer
   hover, principalmente no celular, onde hover não existe. */
.hero__alvo-rotulo i {
    position: relative;
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--vermelho-vivo), var(--vermelho) 75%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}
.hero__alvo-rotulo i::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1.5px solid var(--vermelho-vivo);
    animation: alvo-pulsa 2.2s var(--ease) infinite;
}
@keyframes alvo-pulsa {
    0%   { transform: scale(.6); opacity: .9; }
    70%  { transform: scale(1.9); opacity: 0; }
    100% { transform: scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .hero__alvo-rotulo i::after { animation: none; opacity: .5; }
}

/* A dica no canto de cima da foto. Some no desktop com mouse: lá o hover já
   conta a história, e o texto seria ruído. */
.hero__dica {
    position: absolute;
    left: 14px;
    top: 14px;
    z-index: 2;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(10, 22, 36, .62);
    border: 1px solid rgba(255, 255, 255, .16);
    color: var(--sobre-escuro-fraco);
    font-size: 11.5px;
    font-variation-settings: 'wdth' 96, 'wght' 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    pointer-events: none;
}
@media (hover: hover) and (min-width: 992px) { .hero__dica { display: none; } }

/* ==========================================================================
   CONSÓRCIO — o banner como uma placa
   Arte pronta dentro de uma moldura com espessura (a aresta de baixo sem
   blur), sombra funda, fio de luz em cima e vinheta. Inclina em 3D com o
   mouse (data-inclina) e um brilho varre a superfície no hover. Fica logo
   abaixo da faixa "Sem CNH", com o mesmo fundo escuro das categorias.
   ========================================================================== */

.consorcio {
    background: var(--marinho-profundo);
    padding: clamp(28px, 4vw, 56px) 0 clamp(8px, 1.5vw, 20px);
}
.consorcio__banner {
    position: relative;
    display: block;
    max-width: 1040px;
    margin-inline: auto;
    aspect-ratio: 1672 / 941;
    overflow: clip;
    border-radius: calc(var(--raio-card) + 6px);
    background: var(--papel);
    box-shadow: var(--sombra-escura),
                0 8px 0 -2px var(--marinho-aresta),
                inset 0 1px 0 rgba(255, 255, 255, .8);
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
    will-change: transform;
}
.consorcio__banner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.consorcio__banner::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 70px rgba(16, 30, 44, .14),
                inset 0 1px 0 rgba(255, 255, 255, .7);
}
.banner__brilho {
    position: absolute;
    inset: -20% -40%;
    pointer-events: none;
    background: linear-gradient(115deg,
        rgba(255, 255, 255, 0) 42%,
        rgba(255, 255, 255, .38) 50%,
        rgba(255, 255, 255, 0) 58%);
    transform: translateX(-70%);
    transition: transform 1.1s var(--ease);
}
.consorcio__banner:hover .banner__brilho { transform: translateX(70%); }

/* --- Faixa de argumentos: uma placa em relevo ----------------------------
   Refeita em 09/09/2026. Antes era uma régua chapada de marinho; agora é uma
   placa que flutua sobre a junção entre o hero (claro) e as categorias
   (escuro): metade em cima de cada um. A espessura vem da aresta de baixo
   (o box-shadow sem blur, na cor --marinho-aresta), e a luz vem do fio
   branco no topo. */
.promessa {
    position: relative;
    z-index: 2;
    padding-inline: var(--calha);
    color: var(--sobre-escuro);
    background: linear-gradient(180deg, var(--concreto-fundo) 0 50%, var(--marinho-profundo) 50% 100%);
}
.promessa ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: var(--container);
    margin: 0 auto;
    padding: 0;
    list-style: none;
    background: linear-gradient(180deg, var(--marinho-claro) 0%, var(--marinho) 40%, var(--marinho-profundo) 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--raio-card);
    box-shadow: var(--brilho-topo),
                inset 0 -1px 0 rgba(0, 0, 0, .45),
                0 7px 0 -1px var(--marinho-aresta),
                var(--sombra-funda);
}
.promessa li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px var(--calha);
    border-left: 1px solid var(--traco-escuro);
    font-size: 16px;
    font-variation-settings: 'wdth' 94, 'wght' 500;
    letter-spacing: .01em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.promessa li:first-child { border-left: 0; }
/* "Sem" fica leve e a palavra importante fica pesada e estreita: é o
   contraste que faz a faixa ler de longe. */
.promessa li strong {
    font-size: 1.12em;
    font-variation-settings: 'wdth' 82, 'wght' 800;
    letter-spacing: 0;
}

/* O selo vermelho com o tique: esfera com luz em cima e sombra embaixo. */
.promessa__icone {
    position: relative;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, var(--vermelho-vivo) 0%, var(--vermelho) 65%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .40),
                inset 0 -3px 4px rgba(0, 0, 0, .35),
                0 8px 14px -6px rgba(0, 0, 0, .7);
}
.promessa__icone::after {
    content: '';
    position: absolute;
    left: 10px;
    top: 8px;
    width: 7px;
    height: 11px;
    border: solid var(--sobre-escuro);
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

/* ==========================================================================
   TÍTULO DE SEÇÃO
   ========================================================================== */

/* O cabeçalho é fixo: sem isto, clicar num link do menu para a seção com o
   título escondido atrás da barra. */
[id] { scroll-margin-top: calc(var(--topo-altura) + 20px); }

.secao { padding-block: var(--secao-y); }
.secao--papel    { background: var(--papel); }
.secao--concreto { background: var(--concreto); }

/* Primeira seção de uma página sem hero (privacidade.html): paga o espaço da
   barra fixa, que não empurra nada. */
.secao--sob-barra { padding-top: calc(var(--topo-altura) + var(--secao-y)); }

.cabeca { margin-bottom: clamp(36px, 4vw, 56px); max-width: 60ch; }
.cabeca h2 { font-size: var(--fs-h2); margin-bottom: 14px; }
.cabeca p  { margin: 0; font-size: var(--fs-lead); color: var(--tinta-fraca); }

/* ==========================================================================
   CATEGORIAS — "Conheça nossos modelos"
   Referência: a seção de mesmo nome da motochefebrasil.com.br. Título grande
   à esquerda, texto de apoio à direita e um trilho que anda para o lado
   enquanto a página rola para baixo.

   Como o trilho anda: a .categorias__pista é alta (300vh), o .categorias__palco
   fica sticky no topo dela e o main-v2.js traduz o progresso do scroll dentro
   da pista em translateX no trilho. Fora do desktop, e com movimento reduzido,
   nada disso vale: a pista perde a altura, o palco deixa de ser sticky e o
   trilho vira um scroll horizontal comum com snap. Veja o bloco RESPONSIVO.

   Esta seção é o clima (gente usando, foto de cena). A #modelos logo abaixo é
   o produto (recorte em fundo claro, sem gente). Não junte as duas: elas fazem
   trabalhos diferentes.
   ========================================================================== */

.categorias {
    background: var(--marinho-profundo);
    color: var(--sobre-escuro);
}

/* A altura da pista é o curso do scroll, e quem a calcula é o main-v2.js: ela
   sai da sobra real do trilho, senão a página rola três telas para o trilho
   andar duzentos pixels. Sem JS a pista fica de uma tela e o trilho continua
   arrastável, porque o overflow-x abaixo é o padrão. */
.categorias__pista { position: relative; height: 100vh; }

/* Tudo aqui dentro é medido em vh porque o palco não pode passar de uma tela:
   ele é sticky, e sticky com altura maior que a viewport nunca chega ao fim.
   Se acrescentar linha de texto no card, tire altura da foto. */
.categorias__palco {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(20px, 3vh, 40px);
    height: 100vh;
    min-height: 600px;
    /* O padding de cima reserva a barra fixa: sem ele o título nasce por baixo
       dela sempre que o leitor sobe o scroll e a barra reaparece. */
    padding-top: calc(var(--topo-altura) + 16px);
    padding-bottom: clamp(24px, 4vh, 56px);
    /* clip, não hidden: o palco só precisa esconder o que o trilho joga para
       fora, e `hidden` faria dele mais um scroll container em volta do trilho,
       que já é um. */
    overflow: clip;
}

/* Só o título. Tinha um parágrafo de apoio à direita e o Arthur mandou
   tirar em 09/09/2026: o texto não tinha nada a ver com os cards. */
.categorias__cabeca h2 {
    font-size: var(--fs-h2);
    margin: 0;
}

.categorias__trilho {
    display: flex;
    gap: clamp(16px, 1.8vw, 24px);
    padding-inline: max(var(--calha), calc((100vw - var(--container)) / 2 + var(--calha)));
    /* Respiro em cima e embaixo para a sombra e a inclinação dos cards: o
       overflow-x:auto também corta na vertical, e sem isto a sombra sumia
       e o card inclinado abria uma barra de rolagem vertical no trilho. */
    padding-block: 24px 56px;
    /* O trilho é um scroller de verdade: o JS empurra o scrollLeft dele
       conforme a página desce, e quem quiser também pode arrastar na mão.
       O scroll-behavior precisa ser auto aqui — o smooth global do <html>
       transformaria cada quadro do scroll numa animação e o trilho ficaria
       correndo atrás da página. */
    overflow-x: auto;
    scroll-behavior: auto;
    scrollbar-width: none;
}
.categorias__trilho::-webkit-scrollbar { display: none; }

/* O card inteiro é a foto, com o texto por cima (09/09/2026, a pedido do
   Arthur, igual à motochefe). Ele inclina em 3D conforme o mouse, pelo
   main-v2.js (data-inclina); a transição aqui é a que suaviza a volta. */
.categoria {
    flex: none;
    width: clamp(270px, 30vw, 400px);
    text-decoration: none;
    color: inherit;
    border-radius: 24px;
    box-shadow: var(--sombra-escura);
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
    will-change: transform;
}
.categoria:hover {
    box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .75);
}

/* Altura em vh, não aspect-ratio: com proporção fixa a foto crescia junto com
   a largura do card e empurrava o texto para fora do palco.

   O recorte é `clip`, não `hidden`: os dois cortam a foto no raio de 24px, mas
   `hidden` faz do card um scroll container, e um scroll container dentro de
   outro (o trilho) é caminho para brigar por gesto no trackpad. */
.categoria__palco {
    position: relative;
    height: clamp(320px, 56vh, 540px);
    overflow: clip;
    border-radius: 24px;
    background: rgba(255, 255, 255, .06);
    /* fio de luz na aresta de cima, como vidro */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.categoria__palco img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease);
}
.categoria:hover .categoria__palco img { transform: scale(1.05); }

/* O degradê que segura o texto: transparente até 40% e marinho quase cheio
   no pé. Foi medido na motochefe (transparente 50%, preto 100%, a .65) e
   puxado um pouco para cima porque o nosso texto tem três linhas e uma seta. */
.categoria__palco::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(10, 22, 36, 0) 38%,
        rgba(10, 22, 36, .55) 62%,
        rgba(10, 22, 36, .94) 100%);
}

.categoria__texto {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 1;
    padding: 22px clamp(18px, 2vw, 26px) 24px;
}

/* O selo de preço sobe para o canto de cima, já que o pé da foto agora é do
   texto. O véu é sólido a .88 e não backdrop-filter: quatro selos borrando
   quatro fotos que andam com o scroll é blur de graça em cada quadro, e a
   .88 já lê em qualquer foto. */
.categoria__preco {
    position: absolute;
    left: 14px; top: 14px;
    z-index: 1;
    padding: 8px 14px;
    background: rgba(10, 22, 36, .88);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    font-size: var(--fs-micro);
    font-variation-settings: 'wdth' 92, 'wght' 600;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 8px 16px -8px rgba(0, 0, 0, .7);
}

.categoria h3 {
    font-size: clamp(24px, 2.2vw, 32px);
    margin: 0 0 8px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .40);
}
.categoria p {
    margin: 0;
    max-width: 34ch;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--sobre-escuro-fraco);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

.categoria__seta {
    display: inline-block;
    margin-top: 14px;
    font-size: 14px;
    font-variation-settings: 'wdth' 92, 'wght' 700;
    color: var(--sobre-escuro);
    border-bottom: 2px solid var(--vermelho-vivo);
    padding-bottom: 3px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

/* ==========================================================================
   MODELOS
   Foto solta no branco, sem moldura. Régua vermelha e o texto embaixo.
   Referência: super73.com
   ========================================================================== */

.modelos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(28px, 3vw, 48px) clamp(24px, 2.6vw, 40px);
}

.modelo {
    display: flex;
    flex-direction: column;
    background: none;
    border: 0;
}

/* O palco fixa a proporção, e a foto é posicionada por dentro dele. Deixar a
   <img> ditar a altura fazia cada card da linha parar numa altura diferente,
   e as réguas e os títulos saíam desalinhados entre as colunas. */
.modelo__palco {
    position: relative;
    /* Quadrado: as cinco fotos têm proporções diferentes (quatro em retrato,
       uma em paisagem) e o quadrado acomoda as duas sem sobra torta. */
    aspect-ratio: 1 / 1;
    margin-bottom: 20px;
    /* Um palco com luz: mais claro no centro-alto, onde o veículo fica, e
       escurecendo para o chão. O inset de baixo é a sombra do "piso". */
    background: radial-gradient(85% 70% at 50% 32%, var(--papel) 0%, var(--concreto) 100%);
    border-radius: var(--raio-card);
    box-shadow: var(--sombra-leve),
                inset 0 1px 0 rgba(255, 255, 255, .95),
                inset 0 -28px 44px -34px rgba(16, 30, 44, .30);
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
    will-change: transform;
}
.modelo:hover .modelo__palco { box-shadow: var(--sombra-media), inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -28px 44px -34px rgba(16, 30, 44, .30); }

/* Caixa fixa de 86%, centrada por margin:auto, e a foto encaixada dentro dela
   por object-fit. Com inset percentual e width:auto a <img> é tratada como
   elemento substituído, mantém o tamanho intrínseco e estoura o palco.

   O drop-shadow é o que põe o veículo em pé no chão: como as fotos são
   recorte com alpha, a sombra segue o contorno das rodas e não a caixa. No
   hover o veículo sobe e a sombra se afasta. */
.modelo__palco img {
    position: absolute;
    inset: 0;
    width: 86%;
    height: 86%;
    margin: auto;
    object-fit: contain;
    filter: drop-shadow(0 22px 18px rgba(16, 30, 44, .30));
    transition: transform .5s var(--ease), filter .5s var(--ease);
}
.modelo:hover .modelo__palco img {
    transform: translateY(-10px) scale(1.03);
    filter: drop-shadow(0 36px 26px rgba(16, 30, 44, .30));
}

.modelo__regua {
    height: 2px;
    margin-bottom: 16px;
    background: var(--vermelho);
}

.modelo h3 { font-size: var(--fs-h3); margin-bottom: 8px; }

.modelo__desc {
    margin: 0 0 18px;
    color: var(--tinta-fraca);
    max-width: 34ch;
}

.modelo__preco { margin: 0 0 20px; }
.modelo__preco strong {
    display: block;
    font-size: clamp(24px, 2.2vw, 30px);
    font-variation-settings: 'wdth' 78, 'wght' 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.modelo__preco span {
    display: block;
    margin-top: 5px;
    font-size: var(--fs-micro);
    color: var(--tinta-fraca);
}

.modelo .btn { margin-top: auto; align-self: flex-start; }

/* ==========================================================================
   FICHA DO MODELO (modelo.html)
   Uma página por veículo, montada pelo assets/js/modelo-v2.js. Foto grande
   à esquerda no mesmo palco dos cards, e à direita nome, valor, as três
   especificações, as duas formas de pagar e o botão de simular.
   Substituiu a tabela de preços da home em 10/09/2026: o Arthur quis que o
   valor só apareça para quem clica no modelo.
   ========================================================================== */

.ficha__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
}

/* O mesmo palco dos cards da home, só que maior: quem vem de lá reconhece. */
.ficha__palco {
    position: relative;
    aspect-ratio: 1 / 1;
    background: radial-gradient(85% 70% at 50% 32%, var(--papel) 0%, var(--concreto) 100%);
    border-radius: calc(var(--raio-card) + 6px);
    box-shadow: var(--sombra-media),
                inset 0 1px 0 rgba(255, 255, 255, .95),
                inset 0 -34px 54px -40px rgba(16, 30, 44, .30);
    transition: transform .45s var(--ease);
    will-change: transform;
}
.ficha__palco img {
    position: absolute;
    inset: 0;
    width: 84%;
    height: 84%;
    margin: auto;
    object-fit: contain;
    filter: drop-shadow(0 28px 22px rgba(16, 30, 44, .30));
}

.ficha__voltar {
    display: inline-block;
    margin-bottom: 18px;
    font-size: var(--fs-micro);
    font-variation-settings: 'wdth' 96, 'wght' 700;
    letter-spacing: .03em;
    text-decoration: none;
    color: var(--vermelho);
}
.ficha__voltar:hover { text-decoration: underline; }

.ficha h1 { font-size: var(--fs-h2); margin-bottom: 12px; }
.ficha__desc {
    max-width: 44ch;
    margin: 0 0 26px;
    font-size: var(--fs-lead);
    line-height: 1.45;
    color: var(--tinta-fraca);
}

/* O valor, no mesmo card branco da parcela do hero. */
.ficha__preco {
    margin-bottom: 22px;
    padding: 18px clamp(20px, 2.4vw, 30px);
    border-left: 4px solid var(--vermelho);
    border-radius: var(--raio) var(--raio-card) var(--raio-card) var(--raio);
    background: var(--papel);
    box-shadow: var(--sombra-media), var(--brilho-topo);
}
.ficha__valor {
    display: block;
    font-size: var(--fs-numero);
    font-variation-settings: 'wdth' 74, 'wght' 800;
    line-height: .92;
    letter-spacing: -.02em;
}
.ficha__valor .cifrao { color: var(--vermelho); margin-right: .12em; }
.ficha__valor--consulta { font-size: clamp(24px, 2.6vw, 34px); }
.ficha__avista {
    display: block;
    margin-top: 8px;
    font-size: var(--fs-micro);
    color: var(--tinta-fraca);
}

/* As três especificações lado a lado, cada uma com o rótulo em cima. */
.ficha__specs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0 0 26px;
    border-top: 2px solid var(--tinta);
}
.ficha__specs > div {
    padding: 14px 16px 14px 0;
    border-bottom: 1px solid var(--traco);
}
.ficha__specs dt {
    font-size: var(--fs-micro);
    font-variation-settings: 'wdth' 96, 'wght' 600;
    color: var(--tinta-fraca);
    margin-bottom: 4px;
}
.ficha__specs dd {
    margin: 0;
    font-size: clamp(17px, 1.5vw, 20px);
    font-variation-settings: 'wdth' 84, 'wght' 700;
    line-height: 1.25;
}
/* A única exceção à promessa "sem CNH" do site. Precisa saltar. */
.ficha__specs dd.atencao { color: var(--vermelho); }

.ficha__pagar h2 {
    font-size: var(--fs-h3);
    margin-bottom: 12px;
}
.ficha__pagar ul {
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}
.ficha__pagar li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--traco);
    font-size: 15px;
    line-height: 1.5;
    color: var(--tinta-fraca);
}
.ficha__pagar li:last-child { border-bottom: 1px solid var(--traco); }
.ficha__pagar strong { color: var(--tinta); }
/* O selo da modalidade: o mesmo do hero ("No cartão"). */
.ficha__modo {
    flex: none;
    margin-top: 2px;
    padding: 4px 9px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--marinho-claro), var(--marinho));
    color: var(--sobre-escuro);
    font-size: 11.5px;
    font-variation-settings: 'wdth' 96, 'wght' 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 4px 10px -5px rgba(16, 30, 44, .6);
}
.ficha__modo--consorcio { background: linear-gradient(180deg, var(--vermelho-vivo), var(--vermelho)); }

/* As opções de parcela do cartão, quando o modelo tem número confirmado.
   Uma pílula por opção, com o "sem juros / com juros" embaixo, porque a
   diferença entre as duas é justamente essa e ela não pode virar rodapé. */
.ficha__opcoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ficha__opcao {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 7px 13px;
    border: 1px solid var(--traco);
    border-radius: var(--raio-card);
    background: var(--papel);
    box-shadow: var(--sombra-leve);
}
.ficha__opcao strong {
    font-size: 16px;
    font-variation-settings: 'wdth' 92, 'wght' 700;
    white-space: nowrap;
}
.ficha__opcao em {
    font-style: normal;
    font-size: 11.5px;
    font-variation-settings: 'wdth' 96, 'wght' 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tinta-fraca);
}

.ficha__nota {
    max-width: 60ch;
    margin: 0 0 22px;
    font-size: var(--fs-micro);
    line-height: 1.6;
    color: var(--tinta-fraca);
}

.ficha__cta { margin-top: 4px; }

/* "Veja também": os outros modelos, menores e inteiros clicáveis. */
.modelos--mini { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.modelo--link { text-decoration: none; color: inherit; }
.modelo--link h3 { font-size: clamp(16px, 1.3vw, 19px); }
.modelo__ver {
    margin-top: 6px;
    font-size: var(--fs-micro);
    font-variation-settings: 'wdth' 92, 'wght' 700;
    color: var(--vermelho);
}

/* ==========================================================================
   COMO FUNCIONA
   Numeração legítima: isto é mesmo uma sequência de quatro etapas.
   ========================================================================== */

.passos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    counter-reset: passo;
}

.passo {
    position: relative;
    padding: 0 clamp(20px, 2.4vw, 34px);
    border-left: 1px solid var(--traco);
    counter-increment: passo;
}
.passo:first-child { border-left: 0; padding-left: 0; }

/* O número virou uma peça: um bloco vermelho levemente torto, com luz na
   aresta de cima e sombra colorida embaixo, como uma ficha em cima da mesa. */
.passo::before {
    content: counter(passo);
    display: inline-grid;
    place-items: center;
    width: clamp(56px, 5vw, 68px);
    height: clamp(56px, 5vw, 68px);
    margin-bottom: 18px;
    border-radius: calc(var(--raio-card) - 2px);
    background: linear-gradient(160deg, var(--vermelho-vivo) 0%, var(--vermelho) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32),
                inset 0 -2px 0 rgba(0, 0, 0, .25),
                var(--sombra-vermelha);
    font-size: clamp(26px, 2.6vw, 34px);
    font-variation-settings: 'wdth' 78, 'wght' 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--sobre-escuro);
    transform: rotate(-4deg);
    transition: transform .35s var(--ease);
}
.passo:hover::before { transform: rotate(0deg) translateY(-3px); }

.passo h3 { font-size: var(--fs-h3); margin-bottom: 8px; }
.passo p  { margin: 0; color: var(--tinta-fraca); }

/* ==========================================================================
   BENEFÍCIOS
   ========================================================================== */

.beneficios {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(28px, 3vw, 44px);
}

/* Cada benefício é uma placa branca sobre o concreto, que sobe no hover. */
.beneficio {
    padding: clamp(22px, 2.4vw, 30px) clamp(20px, 2.2vw, 28px);
    background: var(--papel);
    border-radius: var(--raio-card);
    box-shadow: var(--sombra-leve), inset 0 1px 0 rgba(255, 255, 255, 1);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.beneficio:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra-media), inset 0 1px 0 rgba(255, 255, 255, 1);
}
.beneficio h3 {
    font-size: var(--fs-h3);
    margin-bottom: 10px;
}
.beneficio h3::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    margin-bottom: 16px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--vermelho-vivo), var(--vermelho));
    box-shadow: 0 3px 8px -2px rgba(175, 29, 29, .6);
}
.beneficio p { margin: 0; color: var(--tinta-fraca); }

/* ==========================================================================
   O CLUBE — a única faixa escura da página
   Reúne o que antes eram quatro blocos dizendo a mesma coisa:
   banner--clube, manifesto, banner--planos e cta-duplo.
   ========================================================================== */

.clube {
    position: relative;
    overflow: clip;
    background: var(--marinho);
    color: var(--sobre-escuro);
    padding-block: var(--secao-y);
}

/* Dois orbs de cor desfocados atrás de tudo: é o que dá ao card de vidro da
   direita alguma coisa para refratar. Sobre marinho liso o vidro viraria um
   retângulo cinza. */
.clube::before,
.clube::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}
.clube::before {
    width: min(48vw, 760px);
    height: min(48vw, 760px);
    right: -14vw;
    top: -35%;
    background: var(--orb-vermelho);
}
.clube::after {
    width: min(40vw, 620px);
    height: min(40vw, 620px);
    left: -12vw;
    bottom: -45%;
    background: var(--orb-azul);
}

.clube__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(36px, 5vw, 80px);
    align-items: center;
}

.clube h2 { font-size: var(--fs-h2); margin-bottom: 20px; max-width: 16ch; }
.clube p {
    max-width: 48ch;
    margin: 0 0 16px;
    font-size: var(--fs-lead);
    line-height: 1.5;
    color: var(--sobre-escuro-fraco);
}
.clube .btn { margin-top: 18px; }

/* A lista é um card de Liquid Glass sobre os orbs: borda especular por
   inset, reflexo no topo pelo ::before e sombra funda por fora. */
.clube__lista {
    position: relative;
    isolation: isolate;
    margin: 0;
    padding: 8px clamp(22px, 2.6vw, 34px);
    list-style: none;
    background: var(--vidro-solido);
    border: 1px solid var(--vidro-borda);
    border-radius: calc(var(--raio-card) + 6px);
    box-shadow: inset 0 1px 0 var(--vidro-brilho),
                inset 1px 0 0 rgba(255, 255, 255, .12),
                inset 0 -1px 0 rgba(0, 0, 0, .25),
                var(--sombra-escura);
}
.clube__lista::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, .18) 0%,
        rgba(255, 255, 255, .04) 35%,
        rgba(255, 255, 255, 0) 60%);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .clube__lista {
        background: var(--vidro-fundo);
        -webkit-backdrop-filter: blur(var(--vidro-blur)) saturate(170%);
        backdrop-filter: blur(var(--vidro-blur)) saturate(170%);
    }
}
.clube__lista li {
    padding: 20px 0;
    border-top: 1px solid var(--traco-escuro);
}
.clube__lista li:first-child { border-top: 0; }
.clube__lista strong {
    display: block;
    font-variation-settings: 'wdth' 88, 'wght' 700;
    font-size: 17px;
    margin-bottom: 4px;
}
.clube__lista span { color: var(--sobre-escuro-fraco); font-size: 15px; }

/* ==========================================================================
   DÚVIDAS
   ========================================================================== */

.faq { max-width: 820px; }

.faq__item { border-top: 1px solid var(--traco); }
.faq__item:last-child { border-bottom: 1px solid var(--traco); }

.faq__botao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 22px 0;
    background: none;
    border: 0;
    font-family: inherit;
    font-size: var(--fs-h3);
    font-variation-settings: 'wdth' 88, 'wght' 700;
    line-height: 1.2;
    text-align: left;
    color: var(--tinta);
    cursor: pointer;
}

.faq__sinal {
    position: relative;
    flex: none;
    width: 20px; height: 20px;
}
.faq__sinal::before,
.faq__sinal::after {
    position: absolute;
    inset: 50% 0 auto 0;
    height: 2px;
    background: var(--vermelho);
    content: '';
    transition: transform var(--dur) var(--ease);
}
.faq__sinal::after { transform: rotate(90deg); }
.faq__botao[aria-expanded="true"] .faq__sinal::after { transform: rotate(0deg); }

.faq__resposta {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur) var(--ease);
}
.faq__resposta > div { overflow: hidden; }
.faq__item.aberto .faq__resposta { grid-template-rows: 1fr; }

.faq__resposta p {
    margin: 0;
    padding: 0 0 24px;
    max-width: 62ch;
    color: var(--tinta-fraca);
}

/* ==========================================================================
   NOSSA LOJA — o quadro com o mapa
   Texto à esquerda, mapa à direita num quadro que inclina em 3D com o mouse
   (data-inclina, main-v2.js). O iframe não recebe o mouse: o pointer-events
   fica desligado nele de propósito, senão o mapa engole o hover e o 3D nunca
   dispara, e ainda rouba o scroll da página com o zoom. Quem quiser mexer no
   mapa clica e abre no Google Maps.
   ========================================================================== */

.loja__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(36px, 5vw, 80px);
    align-items: center;
}

.loja__texto h2 { font-size: var(--fs-h2); margin: 22px 0 16px; max-width: 14ch; }
.loja__texto p {
    max-width: 44ch;
    margin: 0 0 30px;
    font-size: var(--fs-lead);
    line-height: 1.5;
    color: var(--tinta-fraca);
}

.loja__mapa {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    max-width: 560px;
    margin-left: auto;
    width: 100%;
    overflow: clip;
    border-radius: calc(var(--raio-card) + 6px);
    background: var(--papel);
    box-shadow: var(--sombra-funda),
                inset 0 1px 0 rgba(255, 255, 255, .9),
                0 0 0 1px rgba(16, 30, 44, .06);
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
    will-change: transform;
}
.loja__mapa:hover { box-shadow: 0 50px 90px -30px rgba(6, 14, 24, .8), inset 0 1px 0 rgba(255, 255, 255, .9); }

.loja__mapa iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: none;
    /* Tira o cinza-azulado padrão do embed e aproxima da paleta. */
    filter: saturate(.85) contrast(1.05);
}

/* Vinheta sutil nas bordas do mapa, para ele parecer dentro de um vidro. */
.loja__mapa::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 60px rgba(16, 30, 44, .18),
                inset 0 1px 0 rgba(255, 255, 255, .6);
}

/* O selo no canto: pílula escura com o pino vermelho, mesma família do selo
   de preço das categorias. */
.loja__selo {
    position: absolute;
    /* No pé, não no topo: o Google desenha o próprio cartão com nome e
       endereço no canto de cima do embed, e o selo ficava em cima dele. */
    left: 18px; bottom: 18px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 10px 12px;
    border-radius: 999px;
    background: rgba(10, 22, 36, .90);
    border: 1px solid rgba(255, 255, 255, .14);
    color: var(--sobre-escuro);
    font-size: var(--fs-micro);
    font-variation-settings: 'wdth' 92, 'wght' 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 20px -8px rgba(0, 0, 0, .7);
}
.loja__selo-pino {
    width: 14px; height: 14px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: radial-gradient(circle at 35% 30%, var(--vermelho-vivo), var(--vermelho) 70%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 3px 6px -2px rgba(0, 0, 0, .7);
}

/* ==========================================================================
   PÁGINA DE TEXTO (Política de Privacidade)
   Coluna estreita, medida de leitura curta. É a única parte do site feita
   para ser lida por inteiro.
   ========================================================================== */

.texto-legal { max-width: 68ch; }

.texto-legal h1 {
    font-size: var(--fs-h2);
    margin-bottom: 10px;
}

.texto-legal__data {
    margin: 0 0 40px;
    font-size: var(--fs-micro);
    color: var(--tinta-fraca);
}

.texto-legal h2 {
    font-size: var(--fs-h3);
    margin: 40px 0 12px;
    padding-top: 20px;
    border-top: 2px solid var(--tinta);
}

.texto-legal p,
.texto-legal li { line-height: 1.65; }
.texto-legal p  { margin: 0 0 14px; }
.texto-legal ul { margin: 0 0 14px; padding-left: 22px; }
.texto-legal li { margin-bottom: 7px; }
.texto-legal a  { color: var(--vermelho); }

.texto-legal__voltar {
    margin-top: 44px;
    padding-top: 24px;
    border-top: 1px solid var(--traco);
}

/* ==========================================================================
   RODAPÉ
   ========================================================================== */

.rodape {
    background: var(--marinho);
    color: var(--sobre-escuro-fraco);
    padding-block: clamp(48px, 5vw, 72px) 32px;
}

.rodape__grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: clamp(28px, 3vw, 48px);
    padding-bottom: 40px;
}

/* O logo tem lettering azul-marinho: sobre o rodapé marinho ele sumiria.
   Em vez do arquivo com fundo branco chapado, que deixava um retângulo solto,
   o logo ganha um selo branco com respiro, que lê como escolha. */
.rodape__marca {
    display: inline-block;
    padding: 16px 20px;
    background: var(--papel);
    border-radius: var(--raio-card);
    box-shadow: var(--sombra-escura), inset 0 1px 0 rgba(255, 255, 255, 1);
}
.rodape__marca img { width: 150px; height: auto; }

.rodape h3 {
    font-size: 14px;
    font-variation-settings: 'wdth' 96, 'wght' 700;
    letter-spacing: .03em;
    color: var(--sobre-escuro);
    margin-bottom: 14px;
}
.rodape ul { margin: 0; padding: 0; list-style: none; }
.rodape li, .rodape p { margin: 0 0 10px; font-size: 15px; }
.rodape a { text-decoration: none; }
.rodape a:hover { color: var(--sobre-escuro); text-decoration: underline; }

.rodape__base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 28px;
    border-top: 1px solid var(--traco-escuro);
    font-size: var(--fs-micro);
}
.rodape__base p { margin: 0 0 4px; font-size: var(--fs-micro); }

.sociais { display: flex; gap: 12px; }
.sociais a {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border: 1px solid var(--traco-escuro);
    border-radius: var(--raio);
    transition: background var(--dur) var(--ease);
}
.sociais a:hover { background: rgba(255,255,255,.12); }
.sociais svg { width: 18px; height: 18px; fill: currentColor; }

/* ==========================================================================
   WHATSAPP FLUTUANTE
   ========================================================================== */

.zap {
    position: fixed;
    right: 20px; bottom: 20px;
    z-index: 70;
    display: grid;
    place-items: center;
    width: 56px; height: 56px;
    background: radial-gradient(circle at 35% 28%, var(--vermelho-vivo) 0%, var(--vermelho) 70%);
    border-radius: 50%;
    color: var(--sobre-escuro);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35),
                inset 0 -3px 4px rgba(0, 0, 0, .28),
                0 14px 30px -10px rgba(0, 0, 0, .55);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.zap:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45),
                inset 0 -3px 4px rgba(0, 0, 0, .28),
                0 20px 36px -10px rgba(0, 0, 0, .6);
}

/* ==========================================================================
   VIDRO: fallbacks
   Sem backdrop-filter, ou com o usuário pedindo menos transparência, tudo que
   é vidro vira fundo sólido escuro. Os seletores aqui são os quatro vidros
   da página: barra, pílula, painel e o card da .clube.
   ========================================================================== */

@media (prefers-reduced-transparency: reduce) {
    .topo__barra,
    .menu__painel,
    .promessa ul,
    .clube__lista {
        background: var(--vidro-solido);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .menu-toggle { background: rgba(255, 255, 255, .14); }
}
.zap svg { width: 27px; height: 27px; fill: currentColor; }

/* ==========================================================================
   RESPONSIVO
   Só layout. A tipografia já escala sozinha pelos clamp() nos tokens.
   ========================================================================== */

@media (max-width: 1100px) {
    .rodape__grid { grid-template-columns: 1fr 1fr; }
    .beneficios   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .passos       { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
    .passo:nth-child(odd) { border-left: 0; padding-left: 0; }
}

@media (max-width: 991px) {
    /* Os seis links não cabem na barra: some a régua e sobra a pílula, que abre
       o mesmo painel do desktop. */
    .menu { display: none; }
    .topo__faixa { justify-content: flex-end; }

    /* O trilho das categorias deixa de ser preso ao scroll e vira um carrossel
       que se arrasta com o dedo. O JS já não roda abaixo de 992px; se mexer
       nesse breakpoint, mexa no matchMedia do main-v2.js junto. */
    .categorias__pista { height: auto; }
    .categorias__palco {
        position: static;
        height: auto;
        overflow: visible;
    }
    .categorias__trilho {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: var(--calha);
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
    }
    .categoria { scroll-snap-align: start; width: min(78vw, 340px); }
    .categoria__palco { height: clamp(360px, 92vw, 460px); }
    .categorias__trilho { padding-block: 8px 40px; }

    /* --- A ordem do topo no celular (10/09/2026, pedido do Arthur) ---
       banner interativo > faixa "Sem CNH" > banner do consórcio > o texto do
       hero com o card da parcela > "Conheça nossos modelos". No HTML o texto
       vem antes da foto e a faixa e o consórcio são seções irmãs do hero, e
       no desktop isso precisa continuar assim. Então aqui o <main> vira uma
       coluna flex, o .hero e o .hero__grid somem da árvore de layout
       (display: contents) e os quatro pedaços recebem `order` negativo; o
       resto das seções fica em order 0, na ordem do HTML.
       O padding-top que pagava a barra fixa sai do .hero (que não existe
       mais como caixa) e vira margin-top da foto. */
    main { display: flex; flex-direction: column; }
    .hero, .hero__grid { display: contents; }
    .hero__foto  { order: -4; margin-top: calc(var(--topo-altura) + 5px); }
    .promessa    { order: -3; }
    .consorcio   { order: -2; }
    .hero__texto {
        order: -1;
        padding: clamp(32px, 8vw, 48px) var(--calha) clamp(28px, 7vw, 40px);
        background: radial-gradient(120% 90% at 0% 0%, var(--papel) 0%, var(--concreto-fundo) 70%);
    }
    /* --- A junção foto > faixa (10/09/2026, o Arthur achou dura) ---
       A placa sobe 52px por cima do pé da foto, como no desktop ela monta
       sobre a divisa claro/escuro. Aqui ela vira VIDRO: fundo translúcido com
       blur, então o pôr do sol atravessa a metade de cima e a metade de
       baixo assenta no marinho da seção. O fundo da .promessa é transparente
       nos 52px de cima (senão cobriria a foto) e marinho dali para baixo. */
    .promessa {
        margin-top: -52px;
        padding-top: 0;
        background: linear-gradient(180deg, rgba(10, 22, 36, 0) 0 52px, var(--marinho-profundo) 52px 100%);
    }
    .promessa ul {
        background: rgba(14, 33, 53, .78);
        border-color: rgba(255, 255, 255, .18);
        box-shadow: var(--brilho-topo),
                    inset 0 -1px 0 rgba(0, 0, 0, .45),
                    0 7px 0 -1px var(--marinho-aresta),
                    var(--sombra-escura);
    }
    @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
        .promessa ul {
            background: rgba(14, 33, 53, .58);
            -webkit-backdrop-filter: blur(16px) saturate(160%);
            backdrop-filter: blur(16px) saturate(160%);
        }
    }
    /* Sem o degradê branco na esquerda (o Arthur mandou tirar): no celular
       a foto é uma faixa inteira, não encosta em texto. Fica só o
       escurecimento do pé, mais forte, que é o chão onde a placa senta. */
    .hero__foto::after {
        background: linear-gradient(180deg, rgba(10, 22, 36, 0) 55%, rgba(10, 22, 36, .55) 100%);
    }

    /* A janela do banner interativo mostra os 72% da direita da foto (o
       resto é o asfalto escuro). Proporção = 1672 x .72 / 941. A camada da
       foto fica com 100/.72 da largura, colada à direita, e o overflow
       esconde a sobra. Para cortar mais ou menos, mude os DOIS números. */
    /* A altura vem de padding-top em porcentagem (78.16% = 941/1204), e NAO
       de aspect-ratio: o Safari do iPhone resolvia aspect-ratio num item de
       grid esticado como altura ZERO e a foto sumia (10/09/2026). A camada
       da foto estica entre top e bottom, sem depender de aspect-ratio. */
    .hero__foto { min-height: 0; height: 0; padding-top: 78.16%; }
    .hero__mapa { top: 0; bottom: 0; height: auto; width: 138.9%; aspect-ratio: auto; }
    .hero__alvo { border-radius: 10px; }
    .hero__alvo-rotulo { padding: 5px 9px 5px 7px; font-size: 11px; }
    .hero h1 { max-width: 16ch; }

    .ficha__grid { grid-template-columns: 1fr; }
    /* width:100% é obrigatório: margin-inline:auto num item de grid tira o
       stretch, e como o único filho é a <img> absoluta, o palco ficava com
       largura ZERO e a foto sumia no celular (bug de 10/09/2026). */
    .ficha__palco { width: 100%; max-width: 460px; margin-inline: auto; }
    .modelos--mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }

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

    .clube__grid { grid-template-columns: 1fr; }
    .loja__grid  { grid-template-columns: 1fr; }
    .loja__mapa  { margin-left: 0; max-width: none; }
}

@media (max-width: 700px) {
    /* minmax(0,1fr) e não 1fr: com 1fr a coluna de "emplacamento" crescia e
       a outra encolhia, e a placa saía torta. */
    .promessa ul { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .promessa li { padding: 16px 12px; gap: 10px; justify-content: flex-start; font-size: 14px; line-height: 1.2; }
    .promessa__icone { width: 26px; height: 26px; }
    .promessa__icone::after { left: 9px; top: 6px; width: 6px; height: 10px; }
    .promessa li:nth-child(3) { border-left: 0; }
    .promessa li:nth-child(-n+2) { border-bottom: 1px solid var(--traco-escuro); }
}

@media (max-width: 575px) {
    /* A barra fica só com a logo e o traço: o rótulo "Menu" e o chanfro comem
       largura demais num aparelho de 390px. */
    :root { --topo-chanfro: 20px; }
    .menu-toggle { padding: 12px 14px; }
    .menu-toggle__rot { display: none; }

    .modelos    { grid-template-columns: 1fr; }
    .beneficios { grid-template-columns: 1fr; }
    .passos     { grid-template-columns: 1fr; row-gap: 32px; }
    .passo      { border-left: 0; padding-left: 0; }

    .rodape__grid { grid-template-columns: 1fr; }
    .modelo .btn, .ficha .btn { width: 100%; max-width: 360px; }
    .ficha__specs { grid-template-columns: 1fr; }
    .ficha__specs > div { padding-right: 0; }
    /* Dois por linha também no celular estreito: o card mini é pequeno. */
    .modelos--mini { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
}