/* =============================================================
PR VEÍCULOS — Design System
Paleta: preto + vermelho #D7141E + dourado #F0BE21 (+ branco no conteúdo)
Preto = topbar e rodapé | Branco = cabeçalho | Vermelho = CTAs e o
realce da navegação | Dourado = acentos SOBRE O PRETO (sobre claro ele
some: 1,8:1).
A logo do cabeçalho é a logo-header.webp: o brasão com o miolo preto
PREENCHIDO. A logo.webp/logo-rodape.webp têm o preto transparente e só
servem sobre fundo escuro (rodapé, menu mobile aberto, /links).
NOTA DE CONTRASTE — leia antes de mexer em cor aqui.
O vermelho não foi escolhido, foi AMOSTRADO: #D7141E é a cor do "H" da
logo. Ele é uma cor de luminância MÉDIA, e é isso que decide tudo aqui:
· como FUNDO cheio, carrega texto BRANCO (4,79:1). Daí --on-brand
ser #FFFFFF.
· como TEXTO, ícone ou borda sobre fundo CLARO ele serve (4,79:1),
mas sem folga. Quem tem folga é --brand-800 (6,15:1), e é ele que
leva o texto pequeno e o hover.
· sobre PRETO ele AINDA SERVE, e essa é a diferença desta paleta para
as outras da família: dá 4,10:1, acima dos 3:1 de componente. Ou
seja, superfície e grafismo sobre o rodapé preto podem ser o
vermelho da marca mesmo. Só TEXTO PEQUENO sobre preto precisa de
--brand-400 (7,13:1), que fica reservado a isso.
O HOVER ESCURECE, NÃO CLAREIA — e isto é o oposto do resto da família.
O sistema herdado acende o botão com filter: brightness(1.18). Num
vermelho saturado isso não funciona: o canal R já está em 230 e G/B em
~0, então 1.18 só estoura o R para 255 e o resultado (#FF011A) mexe
pouco E derruba o contraste do rótulo branco de 4,79 para 3,98:1 —
abaixo do AA, exatamente enquanto o dedo está no botão. Escurecer faz o
contrário: brightness(0.86) dá #B9111A, que se move MAIS (Δlum 0,048
contra 0,044) e SOBE o contraste para 6,15:1. Daí o par 0.86 / 0.78.
É o espelho do problema que o preto tem: preto quase não clareia,
vermelho quase não clareia sem estourar.
O DOBRO VOLTOU. O template que veio antes tinha fundido a família de
botão preto (.btn-mapa, .btn-abrir-filtros, .btn-aplicar) na cor da
marca, porque entre o aço dele e o preto havia só 1,9:1 e os dois lado a
lado pareciam erro, não hierarquia. Aqui entre #D7141E e o preto há
4,10:1: eles se separam à vista. Então a hierarquia volta a existir, e o
corte é por PAPEL, não por tamanho:
· VERMELHO = quem COMPROMETE (buscar, enviar, tenho interesse, e o
.btn-aplicar, que confirma a folha de filtros);
· PRETO = quem só LEVA a algum lugar (.btn-mapa, .btn-abrir-filtros).
Assim o vermelho deixa de ser a cor de tudo que é clicável, que num
vermelho desta saturação vira ruído. O preto leva passo de brightness
maior (1.5) porque quase não clareia.
Regra prática: fundo cheio de ação principal = --brand-700 com texto
branco (hover escurece); ícone ou texto sobre claro = --brand-700, e
--brand-800 quando for texto pequeno ou hover; superfície e filete sobre
preto = --brand-700; texto pequeno sobre preto = --brand-400.
============================================================= */
/* ===== TOKENS ===== */
:root {
/* Cores — preto/grafite (primária estrutural / fundos escuros c/ texto branco) */
--ink-950: #030404; /* o preto mais fundo da escala — só a topbar usa */
--ink-900: #18181B;
--ink-800: #0B0B0C;
--ink-700: #27272A;
--ink-500: #3F3F46;
--ink-100: #D7DBE0;
--ink-50: #EEF0F3;
/* Cores — vermelho da marca (CTAs, destaques, links de ação).
#D7141E é amostrado do "H" da logo — não é um vermelho escolhido, é O
vermelho da marca. Sendo de luminância média, ele serve nos dois
fundos (4,79:1 no branco, 4,10:1 no preto), o que nenhuma outra cor
desta família de sites conseguia. Ver a nota de contraste no topo. */
--brand-900: #6E070C; /* vermelho fechado — âncora do gradiente (11,5:1) */
--brand-800: #B9111A; /* hover e texto pequeno sobre claro (6,15:1).
É exatamente brightness(0.86) de --brand-700, para
o token e o filtro darem a MESMA cor. */
--brand-700: #D7141E; /* o vermelho da logo — preenchimentos, CTAs, texto e
ícone sobre claro (4,79:1); superfície e filete
sobre preto (4,10:1) */
--brand-600: #FF3B49;
--brand-500: #FF8E96;
/* Vermelho clareado. Só existe para TEXTO PEQUENO sobre preto, onde os
4,10:1 do vermelho da marca ficam abaixo dos 4,5:1 exigidos. Este dá
7,13:1. Não use como preenchimento: sobre claro ele tem 2,76:1. */
--brand-400: #F0BE21; /* PR: o "claro sobre preto" é o DOURADO da logo (10,7:1) */
/* Dourado da logo ("VEÍCULOS" e a moldura do brasão). Só existe sobre
ESCURO: sobre preto dá 10,7:1, sobre branco 1,8:1 — ali ele não entra.
Papel: acento (filetes, ícones, realce de navegação), nunca ação. */
--gold-500: #F0BE21;
--gold-600: #D9A514;
--gold-line: rgba(240, 190, 33, 0.28);
/* Cabeçalho BRANCO, a pedido do cliente (antes era off-white #F8F6F1). */
--header-bg: #FFFFFF;
/* Superfície de vermelho (fundo cheio, bem claro) */
--brand-soft: #FDECEE;
/* Texto sobre o vermelho da marca: branco, 4,79:1 — ver a nota de
contraste no topo do arquivo. */
--on-brand: #FFFFFF;
/* Erro. Token MORTO — declarado e nunca usado (0 referências no arquivo),
herdado do template. Fica registrado que, se um dia for usado, ele NÃO
pode ser vermelho: aqui vermelho é a cor de ação da marca, e um aviso de
erro em vermelho seria lido como botão. */
--erro: #C62828;
/* Cores — cinza neutro (acento). Eram cinzas FRIOS, calibrados para o
aço azulado do template; ao lado do vermelho um cinza azulado puxa o
neutro para o lado oposto da marca, então aqui eles são neutros. */
--silver-700: #62626A;
--silver-500: #91919A;
--silver-300: #C6C6CB;
--silver-100: #EFEFF1;
--silver-50: #F7F7F8;
/* Cores — neutras */
--white: #FFFFFF;
--gray-50: #F7F8FA;
--gray-100: #ECF0F2;
--gray-200: #DEE2E6;
--gray-300: #CED4DA;
--gray-500: #6C757D;
--gray-700: #343A40;
--gray-900: #111827;
/* WhatsApp (não muda) */
--whatsapp: #25D366;
--whatsapp-dark: #1EBE5D;
/* Gradiente de destaque — vermelho fechado abrindo para o claro (filetes, títulos) */
--accent-gradient: linear-gradient(135deg, #6E070C 0%, #D7141E 45%, #E0A515 100%);
/* Linhas — hairlines translúcidas em vez de cinza chapado: acompanham o
fundo onde o elemento estiver e ficam bem menos "desenhadas". */
--line: rgba(17, 24, 39, 0.08);
--line-strong: rgba(17, 24, 39, 0.13);
/* Anel de foco na cor da marca — substitui o realce só por borda.
O aço do template precisava de 0.32 de opacidade para compensar o
pouco croma; o vermelho é saturado e volta para 0.30 sem perder
presença. */
--focus-ring: 0 0 0 3px rgba(215, 20, 30, 0.30);
/* Raios — cantos contidos. A pílula fica só para chips e etiquetas, onde
é gesto deliberado, não default. */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-xl: 18px;
--radius-btn: 10px;
--radius-pill: 999px;
/* Sombras em duas camadas (contato curto + difusa com spread negativo):
dão profundidade sem o halo cinza uniforme da sombra de uma camada só. */
--shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.05);
--shadow-md: 0 2px 4px rgba(16, 24, 40, 0.04), 0 14px 30px -10px rgba(16, 24, 40, 0.14);
--shadow-lg: 0 4px 10px rgba(16, 24, 40, 0.05), 0 30px 60px -18px rgba(16, 24, 40, 0.22);
/* Tipografia — Archivo nos títulos (grotesca industrial larga, mesma
família de gesto do letreiro condensado da logo), Inter no texto. */
--font-display: 'Archivo', 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
--font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
/* Layout */
--container-max: 1240px;
--container-pad: 24px;
/* Transições */
--t-fast: 0.18s ease;
--t-base: 0.25s ease;
/* Saída rápida, chegada macia: o botão responde no toque e assenta depois.
`ease` puro sai devagar e faz o clique parecer atrasado. */
--ease-btn: cubic-bezier(0.2, 0.7, 0.3, 1);
/* ===== Botões: relevo, não brilho =====
O template pintava a sombra do botão com a cor do próprio botão — um halo
colorido de 18px embaixo do botão. Aqui a sombra é neutra, como a de
qualquer objeto sob luz branca, e o volume vem de dois filetes internos: claro em
cima, escuro embaixo, como uma peça moldada. É o que separa um botão que
tem superfície de um retângulo colorido que flutua. */
--btn-molde: inset 0 1px 0 rgba(255, 255, 255, 0.16),
inset 0 -1px 0 rgba(0, 0, 0, 0.22);
--btn-shadow: 0 1px 2px rgba(16, 24, 40, 0.10),
0 6px 14px -6px rgba(16, 24, 40, 0.30);
--btn-shadow-hover: 0 1px 2px rgba(16, 24, 40, 0.10),
0 14px 24px -10px rgba(16, 24, 40, 0.38);
/* Pressionado: a sombra difusa some e sobra só o contato. O botão encosta
na página em vez de continuar flutuando. */
--btn-shadow-active: 0 1px 1px rgba(16, 24, 40, 0.14);
/* Anel de foco de teclado: dois anéis, um branco por dentro, para o realce
aparecer tanto sobre claro quanto sobre o preto do rodapé. */
--btn-focus-ring: 0 0 0 2px var(--white), 0 0 0 4px var(--brand-700);
/* Mesmo anel, por dentro — para itens de lista, onde um anel externo
brigaria com a borda do vizinho. */
--focus-ring-inset: inset 0 0 0 2px var(--brand-700);
}
/* ===== O anel de foco no toque =====
:focus-visible deveria bastar, mas boa parte dos navegadores móveis o
aplica depois de um TOQUE em : o cliente tocava no número do vendedor
ou no botão de telefone e ficava uma borda escura grudada ali.
A correção é no VALOR, não no seletor. As regras de foco continuam
exatamente como estavam — o que muda é o token, zerado assim que o main.js
detecta um toque de verdade (pointerType === 'touch') e restaurado na
primeira tecla de navegação.
Zerar aqui, e não esconder o anel por padrão, é de propósito: se o JS não
carregar, a classe nunca entra e o anel continua existindo. O modo de
falhar é "acessível demais", não "sem foco visível". */
body.usando-toque {
--btn-focus-ring: 0 0 0 0 transparent;
--focus-ring-inset: inset 0 0 0 0 transparent;
}
/* ===== RESET ===== */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html { scroll-behavior: smooth; }
/* Faz o atributo hidden valer mesmo sobre regras que declaram display.
Sem isto, todo elemento escondido por JS precisa da sua própria regra
`[hidden]` — e basta esquecer uma para ele aparecer em produção. */
[hidden] { display: none !important; }
body {
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.55;
color: var(--gray-900);
background-color: var(--white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Números tabulares: preços e quilometragens alinham em colunas */
font-variant-numeric: tabular-nums;
}
h1, h2, h3, h4 {
font-family: var(--font-display);
letter-spacing: -0.022em;
line-height: 1.12;
}
/* Rótulo curto acima do título da seção — dá hierarquia sem precisar de
enfeite gráfico embaixo do texto. */
.kicker {
display: block;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--brand-700);
margin-bottom: 10px;
}
a {
text-decoration: none;
color: inherit;
}
img { display: block; max-width: 100%; }
button { font-family: inherit; }
/* Anti-zoom iOS */
@media (max-width: 768px) {
input, select, textarea { font-size: 16px !important; }
}
.container {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--container-pad);
}
/* =============================================================
BOTÕES
Um sistema só, três camadas que valem para todo botão do site
(inclusive os que não usam a classe .btn — ver "Superfícies" abaixo):
1. relevo — --btn-molde: filete claro em cima, escuro embaixo
2. sombra — neutra, nunca da cor do botão, em duas camadas
3. resposta — sobe 1px e acende no hover; encosta e apaga no clique
A resposta é `filter: brightness()`, não uma segunda cor de fundo — e
transiciona de verdade, o que `background-image` não faz.
MAS A DIREÇÃO MUDOU, e é a única coisa deste sistema que não veio pronta
do template. Lá o hover CLAREAVA (1.18), porque o aço tinha os três canais
no meio da escala e subia limpo. O vermelho da marca é o caso que aquele
comentário previa e não precisava tratar: "uma cor saturada acende torto —
o canal que já está no teto não sobe e o brilho escapa pelos outros".
#D7141E tem R em 230 e G/B em ~0, então 1.18 só estoura o R até 255, mexe
pouco à vista e derruba o rótulo branco de 4,79 para 3,98:1.
Por isso, aqui, botão VERMELHO ESCURECE: 0.86 no hover (#B9111A, que sobe
o contraste para 6,15:1 e se move mais que o 1.18 movia) e 0.78 no clique.
Botão PRETO continua clareando, e com passo grande (1.5), porque preto
quase não clareia. Verde do WhatsApp segue no passo curto (1.06).
============================================================= */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 14px 26px;
border-radius: var(--radius-btn);
font-size: 14px;
font-weight: 600;
/* Um passo de tracking negativo: em caixa alta e baixa, peso 600 em 14px
abre demais e o rótulo perde a forma de bloco. */
letter-spacing: -0.008em;
line-height: 1.15;
border: 1px solid transparent;
cursor: pointer;
text-align: center;
white-space: nowrap;
isolation: isolate;
transition: filter var(--t-fast),
background-color var(--t-base), border-color var(--t-base),
color var(--t-base),
transform 0.16s var(--ease-btn), box-shadow 0.22s var(--ease-btn);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); transition-duration: 0.06s; }
/* Ícones dentro do botão: mesmo tamanho em todo lugar e um empurrãozinho
no hover — só quem tem seta é que anda, os outros ficam parados. */
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
/* Foco de teclado. Estava ausente no template: quem navega por Tab não via
onde estava.
O `outline: none` vale sempre — quem desenha o realce é o box-shadow
abaixo, não o contorno padrão do navegador. Quem apaga o anel no toque é
o token --btn-focus-ring, zerado em `body.usando-toque` (ver main.js). */
.btn:focus-visible,
.btn-busca:focus-visible,
.btn-enviar:focus-visible,
.btn-enviar-sidebar:focus-visible,
.btn-wpp-veiculo:focus-visible,
.btn-loja-whats:focus-visible,
.btn-mapa:focus-visible,
.btn-limpar:focus-visible,
.cookie-btn:focus-visible,
.vkintegradora-btn-phone:focus-visible,
.whatsapp-float:focus-visible {
outline: none;
/* O anel entra por cima do relevo, não no lugar dele: sem repetir o
--btn-molde aqui, o botão perde a superfície ao receber foco. */
box-shadow: var(--btn-molde), var(--btn-focus-ring);
}
/* Fantasma e "limpar filtros" não têm relevo para preservar. */
.btn-ghost:focus-visible,
.btn-limpar:focus-visible,
.cookie-btn-ghost:focus-visible,
.vkintegradora-btn-phone:focus-visible {
outline: none;
box-shadow: var(--btn-focus-ring);
}
/* ----- Primária: aço chapado (ver veículo, ver estoque, ver mapa) ----- */
.btn-primary,
.btn {
background-color: var(--brand-700);
color: var(--on-brand);
box-shadow: var(--btn-molde), var(--btn-shadow);
}
.btn-primary:hover,
.btn:hover {
color: var(--on-brand);
filter: brightness(0.86);
box-shadow: var(--btn-molde), var(--btn-shadow-hover);
}
.btn-primary:active,
.btn:active {
filter: brightness(0.78);
box-shadow: var(--btn-molde), var(--btn-shadow-active);
}
/* ----- Acento: o CTA de conversão (tenho interesse, buscar, enviar) -----
Mesma família da primária; o que a destaca é um degradê vertical de 6%,
claro em cima. É o degradê que uma superfície real teria sob luz de cima —
diferente do 135° de duas cores do template, que era desenho, não luz. */
.btn-accent,
.btn-red {
background-color: var(--brand-700);
background-image: linear-gradient(180deg, #D7141E 0%, #CD121C 62%, #BF101A 100%);
color: var(--on-brand);
border-color: transparent;
box-shadow: var(--btn-molde), var(--btn-shadow);
}
.btn-accent:hover,
.btn-red:hover {
border-color: transparent;
color: var(--on-brand);
filter: brightness(0.86);
box-shadow: var(--btn-molde), var(--btn-shadow-hover);
}
.btn-accent:active,
.btn-red:active {
filter: brightness(0.78);
box-shadow: var(--btn-molde), var(--btn-shadow-active);
}
/* ----- Fantasma: hairline, sem preenchimento -----
Sem relevo de propósito: não tem superfície para moldar. O que ele ganha no
hover é uma superfície — o cinza mais fraco da escala — e a linha fechando. */
.btn-ghost {
background-color: transparent;
color: var(--ink-900);
border-color: var(--line-strong);
box-shadow: none;
}
.btn-ghost:hover {
border-color: var(--ink-900);
background-color: var(--ink-50);
color: var(--ink-900);
filter: none;
box-shadow: var(--shadow-sm);
}
.btn-ghost:active {
background-color: var(--ink-100);
box-shadow: none;
}
.btn-full {
width: 100%;
}
/* Quem não pode se mexer, não se mexe. */
@media (prefers-reduced-motion: reduce) {
.btn,
.btn-busca,
.btn-enviar,
.btn-enviar-sidebar,
.btn-wpp-veiculo,
.whatsapp-float {
transition: none;
}
.btn:hover,
.btn-busca:hover,
.btn-enviar-sidebar:hover,
.btn-wpp-veiculo:hover { transform: none; }
.whatsapp-float:hover { transform: none; }
}
/* ===== TOPBAR ===== */
/* Grafite um passo acima do cabeçalho: a topbar precisa se ler como faixa
separada, não como a borda de cima do header. */
/* OFF-WHITE, a pedido do cliente. Ela era preta e emoldurava o cabeçalho
branco por cima; agora o topo da página é uma faixa clara sobre outra.
Como as duas são claras, o que as separa deixou de ser o contraste e passou
a ser o FILETE de baixo — sem ele a topbar não teria fim visível e o
cabeçalho pareceria começar no meio do nada. O off-white é um passo abaixo
do branco puro do cabeçalho, o suficiente para a ordem ser lida.
Com isto o preto do site fica só embaixo: rodapé, cartão de CTA e o menu
mobile aberto. */
.vkintegradora-topbar {
/* PR: preto mais fundo que o cabeçalho, para a faixa se ler separada. */
background: var(--ink-950);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
padding: 8px 0;
font-size: 12.5px;
color: rgba(255, 255, 255, 0.72);
}
.vkintegradora-topbar-inner {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--container-pad);
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}
.vkintegradora-topbar-left,
.vkintegradora-topbar-right {
display: flex;
align-items: center;
gap: 24px;
}
.vkintegradora-topbar-item {
display: flex;
align-items: center;
gap: 8px;
font-weight: 500;
}
.vkintegradora-topbar-sep { opacity: 0.45; }
.vkintegradora-topbar-item svg {
flex-shrink: 0;
/* Ícones no dourado da logo: pontuação, não conteúdo. */
color: var(--gold-500);
}
.vkintegradora-topbar-item a {
color: rgba(255, 255, 255, 0.72);
transition: color var(--t-fast);
}
.vkintegradora-topbar-item a:hover {
color: var(--gold-500);
}
@media (max-width: 768px) {
.vkintegradora-topbar { display: none; }
}
/* ===== HEADER (VK Integradora) ===== */
.vkintegradora-header {
position: sticky;
top: 0;
width: 100%;
/* BRANCO. O brasão entra como peça fechada (miolo preto preenchido),
então ele se sustenta sobre o claro como um selo. A topbar preta acima
e o rodapé preto abaixo continuam emoldurando a página. */
background: var(--header-bg);
z-index: 1000;
border-bottom: 1px solid var(--line-strong);
transition: box-shadow var(--t-base);
}
.vkintegradora-header-container {
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
}
.vkintegradora-header-content {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
position: relative;
z-index: 1001;
}
.vkintegradora-logo {
display: flex;
align-items: center;
flex-shrink: 0;
transition: opacity var(--t-fast);
}
/* O brasão é quase quadrado (1,73:1) e tem a faixa "COMPRA · VENDA · TROCA"
em ~9% da altura — por isso ele pede mais altura que uma logo horizontal.
64px no desktop dá ~111px de largura e "PR VEÍCULOS" com ~13px de letra. */
.vkintegradora-logo img {
height: 64px;
width: auto;
}
.vkintegradora-logo:hover { opacity: 0.85; }
/* Menu mobile aberto: o overlay é PRETO e cobre o cabeçalho claro. Ali entra
a logo-rodape.webp (preto transparente), que assenta no preto sem o
contorno do selo. As duas ficam empilhadas no mesmo . */
.vkintegradora-logo-inv { display: none; }
body.menu-aberto .vkintegradora-logo-normal { display: none; }
body.menu-aberto .vkintegradora-logo-inv { display: block; }
.vkintegradora-nav-wrapper {
display: flex;
align-items: center;
gap: 16px;
}
.vkintegradora-nav {
display: flex;
gap: 4px;
align-items: center;
}
.vkintegradora-nav-link {
color: var(--ink-500);
font-weight: 500;
font-size: 14.5px;
padding: 10px 2px;
margin: 0 14px;
position: relative;
letter-spacing: 0.01em;
transition: color var(--t-fast);
white-space: nowrap;
}
/* Filete que cresce do centro. Com o cabeçalho claro ele passou de
--brand-400 para --brand-700: o vermelho clareado existe para texto sobre
PRETO e sobre branco tem 2,76:1 — aqui ele quase não se veria. */
.vkintegradora-nav-link::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 2px;
height: 1.5px;
background: var(--brand-700);
transform: scaleX(0);
transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Só onde existe ponteiro. Em tela de toque o :hover não é um estado
passageiro: ele GRUDA no item depois do toque e só sai quando se toca em
outro lugar — então o link ficaria preso na cor de hover. */
@media (hover: hover) {
.vkintegradora-nav-link:hover {
color: var(--ink-900);
}
.vkintegradora-nav-link:hover::before {
transform: scaleX(1);
}
}
.vkintegradora-nav-link.active {
color: var(--ink-900);
}
.vkintegradora-nav-link.active::before {
transform: scaleX(1);
}
/* Blocos que só existem no menu mobile. No desktop a nav é uma linha
horizontal ao lado da logo, e nada disto cabe lá: o link legal vive no
rodapé, e contato/endereço/horário vivem na topbar e na página de contato. */
.vkintegradora-nav-legal,
.vkintegradora-nav-kicker,
.vkintegradora-nav-wpp,
.vkintegradora-nav-info { display: none; }
/* VERMELHO CHEIO — pedido do cliente. Ele nasceu fantasma aqui (contorno e
rótulo, preenchendo só no hover) para não disputar atenção com o "H"
vermelho da logo, que fica a poucos centímetros. A decisão foi trocada:
o telefone é a ação que a loja quer em primeiro plano, e cheio ele é
SUPERFÍCIE, não texto.
Rótulo branco sobre o vermelho da marca dá 4,79:1.
Tendo superfície, ele reassume o relevo do sistema de botões (--btn-molde,
filete claro em cima e escuro embaixo) — o fantasma não tinha o que moldar. */
.vkintegradora-btn-phone {
background: var(--brand-700);
color: var(--white) !important;
padding: 10px 20px;
border: 1px solid transparent;
border-radius: var(--radius-btn);
font-weight: 600;
font-size: 14px;
margin-left: 22px;
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: var(--btn-molde), var(--btn-shadow);
transition: filter var(--t-fast), transform 0.16s var(--ease-btn),
box-shadow 0.22s var(--ease-btn);
white-space: nowrap;
line-height: 1;
}
/* Escurece, como todo botão vermelho do site: clarear um vermelho saturado
estoura o canal R e derruba o rótulo branco para 3,98:1. Ver a nota do topo. */
.vkintegradora-btn-phone:hover {
filter: brightness(0.86);
transform: translateY(-1px);
box-shadow: var(--btn-molde), var(--btn-shadow-hover);
}
.vkintegradora-btn-phone:active {
filter: brightness(0.78);
transform: translateY(0);
box-shadow: var(--btn-molde), var(--btn-shadow-active);
transition-duration: 0.06s;
}
.vkintegradora-btn-phone svg {
width: 16px;
height: 16px;
flex-shrink: 0;
fill: none;
stroke: currentColor;
}
.vkintegradora-mobile-toggle {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 6px 2px;
transition: opacity 0.2s ease;
}
.vkintegradora-mobile-toggle:hover {
opacity: 0.75;
}
.vkintegradora-mobile-toggle span {
width: 24px;
height: 2px;
background: var(--ink-900);
transition: all 0.3s ease;
border-radius: 2px;
display: block;
}
/* Com o menu aberto o botão deixa de estar sobre o cabeçalho branco e passa a
estar sobre o overlay preto — as barras voltam a ser brancas. Sem isto o X
de fechar sumiria no exato momento em que ele é o único jeito de sair. */
.vkintegradora-mobile-toggle.active span {
background: #ffffff;
}
/* Barra do meio mais curta: detalhe que tira a cara de ícone padrão */
.vkintegradora-mobile-toggle span:nth-child(2) {
width: 17px;
margin-left: auto;
}
@media (max-width: 1024px) {
.vkintegradora-nav-link {
font-size: 13.5px;
padding: 8px 12px;
}
.vkintegradora-btn-phone {
padding: 10px 20px;
margin-left: 10px;
}
}
@media (max-width: 768px) {
.vkintegradora-header-container { padding: 0 20px; }
.vkintegradora-header-content { padding: 6px 0; z-index: 5001; }
/* 32px no celular, contra os 38 do desktop. Dá 119px de largura: numa tela
de 390 sobra folga de sobra ao lado do hambúrguer.
"veículos" ainda fecha com ~15px — nesta arte o celular não custa
legibilidade, ao contrário do que custava na logo anterior. */
.vkintegradora-logo img { height: 50px; }
/* Logo acima do overlay do menu (z 5000) — fica à esquerda do X quando aberto */
.vkintegradora-logo { position: relative; z-index: 5001; }
.vkintegradora-mobile-toggle { display: flex; position: relative; z-index: 5001; }
.vkintegradora-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100dvh;
/* Preto chapado, igual ao cabeçalho e ao rodapé. */
background: var(--ink-800);
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
/* Sem gap: cada botão traz a própria margem, e o bloco de contato usa
`margin-top: auto` para descer — um gap no contêiner brigaria com ele. */
gap: 0;
/* Entra deslizando da direita. transform não cria scroll horizontal (≠ left:100%). */
transform: translateX(100%);
transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
/* Respeita a barra do sistema no iPhone: sem isto o link de privacidade
fica embaixo do indicador de home. */
padding: 96px 26px calc(28px + env(safe-area-inset-bottom));
overflow-y: auto;
overscroll-behavior: contain;
z-index: 5000;
}
.vkintegradora-nav.active { transform: translateX(0); }
/* Item do menu: BOTÃO, não manchete.
Antes eram três linhas de Archivo a 27px com numeração "01 02 03" e
hairline entre elas — desenho de revista, que num painel com WhatsApp e
telefone logo abaixo fazia o menu ter duas linguagens ao mesmo tempo.
Como botão, os três itens passam a ser da mesma família dos dois de baixo
e o painel inteiro se lê como uma coisa só.
A superfície é branco a 6% com hairline a 12%: um degrau acima do preto
do painel, e deliberadamente mais quieto que o verde cheio do WhatsApp e
que o fantasma do telefone — navegar é o que o visitante faz por último
aqui; falar com a loja é o que ele veio fazer. */
.vkintegradora-nav-link {
font-family: var(--font-sans);
font-size: 16px;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1;
padding: 17px 18px;
margin: 0 0 10px;
/* Crescem para dividir a folga da tela entre si, com teto. Sem isto, com
três rótulos curtos, TODA a sobra virava um vão único de ~220px entre a
lista e o bloco de contato — que é exatamente o tipo de buraco que fez
este menu ser refeito. O teto impede que numa tela alta eles virem
faixas. */
flex: 1 1 auto;
max-height: 78px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-btn);
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.92);
display: flex;
align-items: center;
gap: 12px;
text-align: left;
opacity: 1;
transform: none;
transition: background var(--t-fast), border-color var(--t-fast),
color var(--t-fast), opacity 0.32s ease, transform 0.32s ease;
}
/* A numeração sai junto com o tipo grande: "01" ao lado de um rótulo de
16px vira sujeira, não hierarquia. O ::before continua zerado porque o
desktop usa o mesmo seletor para o filete sob o link. */
.vkintegradora-nav-link::before {
content: none;
}
.vkintegradora-nav-link::after {
content: "";
margin-left: auto;
width: 16px;
height: 9px;
flex-shrink: 0;
background: currentColor;
opacity: 0.35;
transition: opacity var(--t-fast), transform var(--t-fast);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h14M11 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h14M11 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
}
/* Página atual: o vermelho da marca entra na borda e num fundo de 16%, sem
encher o botão — cheio, ele competiria com o WhatsApp e pareceria a ação
principal do painel, que ele não é. O texto continua branco: a 16% o
fundo é mancha, não superfície. */
/* O hover do cabeçalho é GRAFITE, porque lá o fundo é branco. Aqui o fundo
é o overlay PRETO: herdado, o item sumia ao ser tocado (24,24,27 sobre
preto é ~1:1). No menu quem acende é o branco, e o realce vem do fundo. */
.vkintegradora-nav-link:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.06);
}
.vkintegradora-nav-link.active {
background: rgba(215, 20, 30, 0.16);
border-color: rgba(215, 20, 30, 0.55);
color: #ffffff;
}
.vkintegradora-nav-link:active {
background: rgba(255, 255, 255, 0.11);
transition-duration: 0.06s;
}
.vkintegradora-nav-link.active::after {
opacity: 1;
transform: translateX(3px);
}
/* =========================================================
Entrada escalonada — o estado de partida é o menu FECHADO.
Antes isto dependia de uma classe `.is-opening` que o main.js nunca
chegava a colocar: os `transition-delay` existiam e não faziam nada.
Agora o repouso é o próprio :not(.active), então abrir já escalona.
========================================================= */
.vkintegradora-nav:not(.active) > * {
opacity: 0;
transform: translateY(16px);
}
.vkintegradora-nav > * {
transition: opacity 0.34s var(--ease-btn), transform 0.34s var(--ease-btn);
}
.vkintegradora-nav.active > * {
opacity: 1;
transform: translateY(0);
}
.vkintegradora-nav.active > *:nth-child(1) { transition-delay: 0.10s; }
.vkintegradora-nav.active > *:nth-child(2) { transition-delay: 0.15s; }
.vkintegradora-nav.active > *:nth-child(3) { transition-delay: 0.20s; }
.vkintegradora-nav.active > *:nth-child(4) { transition-delay: 0.25s; }
.vkintegradora-nav.active > *:nth-child(5) { transition-delay: 0.29s; }
.vkintegradora-nav.active > *:nth-child(6) { transition-delay: 0.33s; }
.vkintegradora-nav.active > *:nth-child(7) { transition-delay: 0.37s; }
.vkintegradora-nav.active > *:nth-child(8) { transition-delay: 0.41s; }
@media (prefers-reduced-motion: reduce) {
.vkintegradora-nav:not(.active) > *,
.vkintegradora-nav.active > * { opacity: 1; transform: none; transition: none; }
}
/* ===== Bloco de contato do menu =====
O menu tinha três links e um botão no topo e metade da tela vazia
embaixo. O que preenche não é espaçamento maior — é o que o visitante
de celular vai procurar em seguida: falar com a loja, o endereço e o
horário.
A distribuição mudou quando os itens viraram botões. Antes o `margin-top:
auto` no kicker jogava o contato para a base, e o tipo de 27px da lista
ocupava o alto — os dois blocos se encostavam nas pontas e o vão do meio
era respiro. Com botões de 16px a lista encolheu, o vão passou de 220px e
voltou a parecer buraco. Agora quem absorve a folga são os próprios
botões (`flex: 1 1 auto` com teto), e o contato vem logo abaixo deles: o
espaço se reparte em vez de se acumular num lugar só. O WhatsApp continua
na metade de baixo da tela, ao alcance do polegar. */
.vkintegradora-nav-kicker,
.vkintegradora-nav-wpp,
.vkintegradora-nav-info { display: flex; }
.vkintegradora-nav-info { display: grid; }
.vkintegradora-nav-kicker {
margin: 26px 0 14px;
padding-top: 30px;
font-family: var(--font-sans);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.40);
display: flex;
align-items: center;
gap: 12px;
}
/* Filete que ocupa o resto da linha do rótulo */
.vkintegradora-nav-kicker::after {
content: "";
flex: 1;
height: 1px;
background: rgba(255, 255, 255, 0.12);
}
/* WhatsApp é o botão cheio: no celular é o canal que o visitante usa.
O telefone fica logo abaixo como fantasma — mesma altura, menos peso. */
.vkintegradora-nav-wpp {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 24px;
border-radius: var(--radius-btn);
background: var(--whatsapp);
color: #ffffff;
font-family: var(--font-sans);
font-size: 15px;
font-weight: 600;
letter-spacing: -0.008em;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30),
inset 0 -1px 0 rgba(0, 0, 0, 0.16);
}
.vkintegradora-nav-wpp svg { width: 19px; height: 19px; flex-shrink: 0; }
.vkintegradora-nav-wpp:active { filter: brightness(0.94); }
.vkintegradora-btn-phone {
margin: 10px 0 0;
justify-content: center;
font-family: var(--font-sans);
font-size: 15px;
font-weight: 600;
padding: 16px 24px;
border-radius: var(--radius-btn);
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.18);
color: #ffffff !important;
display: flex;
/* Aqui ele volta a ser FANTASMA: no menu aberto o fundo é o overlay preto,
e o vermelho cheio brigaria com o verde do WhatsApp logo acima — ali o
WhatsApp é o botão principal e o telefone é a alternativa.
Sendo fantasma, ele precisa DESFAZER o que a versão cheia traz: o
--btn-molde desenharia um filete numa peça sem superfície, e o
brightness dos estados escureceria o rótulo branco junto com o nada. */
box-shadow: none;
filter: none;
}
.vkintegradora-btn-phone:hover,
.vkintegradora-btn-phone:active {
filter: none;
box-shadow: none;
transform: none;
}
.vkintegradora-btn-phone:active {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(255, 255, 255, 0.30);
color: #ffffff !important;
}
/* Endereço e horário: duas colunas de rótulo + valor, tipo pequeno.
É informação para consultar, não para clicar — por isso não é link. */
.vkintegradora-nav-info {
margin: 26px 0 0;
display: grid;
grid-template-columns: auto 1fr;
gap: 4px 18px;
font-family: var(--font-sans);
font-size: 12.5px;
line-height: 1.5;
}
.vkintegradora-nav-info dt {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.38);
padding-top: 2px;
white-space: nowrap;
}
.vkintegradora-nav-info dd {
margin: 0;
color: rgba(255, 255, 255, 0.70);
}
/* Política de Privacidade: nota de rodapé do menu, fora da lista numerada */
.vkintegradora-nav a.vkintegradora-nav-legal {
display: block;
margin-top: 24px;
padding-top: 16px;
border: 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
font-family: var(--font-sans);
font-size: 12.5px;
font-weight: 400;
letter-spacing: 0;
color: rgba(255, 255, 255, 0.42);
text-align: center;
}
.vkintegradora-nav a.vkintegradora-nav-legal:hover { color: rgba(255, 255, 255, 0.8); }
.vkintegradora-mobile-toggle.active span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.vkintegradora-mobile-toggle.active span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.vkintegradora-mobile-toggle.active span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
}
/* Telas baixas (iPhone SE e afins, e qualquer celular na horizontal).
O menu tem lista + contato + endereço + horário: numa tela de 667px isso
passa da altura e ele começa a rolar. Rolagem num menu de três itens é
sinal de que o tipo está grande demais, não de que falta espaço — então
aqui tudo encolhe um passo, e o menu volta a caber inteiro. */
@media (max-width: 768px) and (max-height: 730px) {
.vkintegradora-nav {
padding-top: 82px;
padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
.vkintegradora-nav-link {
font-size: 15px;
padding: 14px 16px;
margin-bottom: 8px;
max-height: 64px;
}
.vkintegradora-nav-kicker {
padding-top: 18px;
margin-bottom: 11px;
}
.vkintegradora-nav-wpp,
.vkintegradora-btn-phone {
padding-top: 14px;
padding-bottom: 14px;
font-size: 14.5px;
}
.vkintegradora-nav-info { margin-top: 18px; font-size: 12px; }
.vkintegradora-nav a.vkintegradora-nav-legal {
margin-top: 16px;
padding-top: 12px;
}
}
/* ===== HERO ===== */
.hero-banner {
width: 100%;
line-height: 0;
}
.hero-banner img {
width: 100%;
height: auto;
display: block;
}
.hero-banner .hero-h1 {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
}
/* ===== HOME CAROUSEL (banners gerenciáveis em /admin) =====
Full-bleed; a imagem aparece inteira (altura segue a proporção). */
.home-carousel { position: relative; width: 100%; overflow: hidden; line-height: 0; }
.home-carousel .hero-h1 {
position: absolute; width: 1px; height: 1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}
.home-carousel__track { position: relative; width: 100%; }
.home-carousel__slide { display: block; text-decoration: none; color: inherit; }
.home-carousel__slide:not(.is-active) {
position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .6s ease;
}
.home-carousel__slide.is-active { position: relative; opacity: 1; z-index: 1; transition: opacity .6s ease; }
.home-carousel__slide picture { display: block; width: 100%; }
.home-carousel__slide img { display: block; width: 100%; height: auto; }
.home-carousel__arrow {
position: absolute; top: 50%; transform: translateY(-50%);
width: 44px; height: 44px; background: transparent; border: 0; color: #fff;
display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3;
transition: transform .2s, opacity .2s; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); opacity: .85;
}
.home-carousel__arrow:hover { transform: translateY(-50%) scale(1.15); opacity: 1; }
.home-carousel__arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.home-carousel__arrow--prev { left: 20px; }
.home-carousel__arrow--next { right: 20px; }
.home-carousel__dots {
position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
display: flex; gap: 10px; z-index: 3; line-height: 1;
}
.home-carousel__dot {
width: 32px; height: 4px; background: rgba(255,255,255,.45); border: 0;
border-radius: 2px; cursor: pointer; padding: 0; transition: background .2s, transform .2s;
}
.home-carousel__dot.is-active { background: #fff; transform: scaleY(1.4); }
.home-carousel__dot:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@media (max-width: 900px) {
.home-carousel__arrow { width: 36px; height: 36px; }
.home-carousel__arrow--prev { left: 10px; }
.home-carousel__arrow--next { right: 10px; }
.home-carousel__dots { bottom: 12px; gap: 6px; }
.home-carousel__dot { width: 22px; }
}
@media (prefers-reduced-motion: reduce) { .home-carousel__slide { transition: none; } }
.hero-section {
position: relative;
background-color: var(--ink-900);
background-image: url("../images/banner-desktop.webp");
background-size: cover;
background-position: center right;
background-repeat: no-repeat;
overflow: hidden;
padding: 70px 0 110px;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 540px;
}
.hero-tag {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.1);
color: var(--silver-300);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
padding: 6px 14px;
border-radius: var(--radius-btn);
margin-bottom: 18px;
backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.12);
}
.hero-tag::before {
content: "";
width: 6px;
height: 6px;
background: var(--silver-300);
border-radius: 50%;
box-shadow: 0 0 8px rgba(199, 205, 212, 0.6);
}
.hero-h1 {
font-size: 13px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--white);
margin: 0 0 14px;
opacity: 0.85;
text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.hero-title {
font-size: clamp(32px, 5vw, 48px);
font-weight: 800;
line-height: 1.1;
color: var(--white);
margin-bottom: 18px;
letter-spacing: -0.02em;
text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.hero-title em {
font-style: normal;
position: relative;
background: var(--accent-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.hero-subtitle {
font-size: 17px;
color: rgba(255,255,255,0.88);
line-height: 1.6;
margin-bottom: 28px;
max-width: 480px;
text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.hero-section .btn-ghost {
color: var(--white);
border-color: rgba(255,255,255,0.6);
background-color: rgba(255,255,255,0.05);
}
.hero-section .btn-ghost:hover {
background-color: var(--white);
color: var(--ink-900);
border-color: var(--white);
}
.hero-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
@media (max-width: 900px) {
.hero-section {
padding: 50px 0 70px;
background-image: url("../images/banner-mobile.webp");
background-position: center;
aspect-ratio: 4 / 5;
}
.hero-content {
text-align: center;
max-width: 100%;
}
.hero-subtitle {
font-size: 14px;
margin-left: auto;
margin-right: auto;
}
.hero-actions {
display: none;
}
}
/* ===== BUSCA ===== */
/* Sem banner nenhum na home (a loja excluiu o estático e não cadastrou outro):
o recuo negativo sai e entra um respiro, senão a busca encosta no cabeçalho. */
.search-section--sem-banner { margin-top: 32px !important; }
.search-section {
/* Quanto a busca sobe por cima do banner. A mesma medida corta o fundo:
transparente na parte que encavala, cinza dali para baixo — se as duas
divergirem, aparece uma tarja branca entre o banner e a vitrine. */
--busca-sobe: 28px;
margin-top: calc(-1 * var(--busca-sobe));
background: linear-gradient(to bottom, transparent var(--busca-sobe), var(--gray-100) var(--busca-sobe));
padding: 0 var(--container-pad) 0;
position: relative;
z-index: 5;
}
.search-box {
max-width: 720px;
margin: 0 auto;
background: var(--white);
border-radius: var(--radius-lg);
padding: 28px 32px;
box-shadow: var(--shadow-md);
border: 1px solid var(--line);
}
.search-title {
font-size: 18px;
color: var(--ink-900);
margin-bottom: 16px;
font-weight: 500;
}
.search-title strong {
font-weight: 700;
color: var(--ink-900);
}
.search-form {
display: flex;
gap: 12px;
align-items: center;
}
.search-input-wrap {
flex: 1;
display: flex;
align-items: center;
gap: 10px;
border: 1.5px solid var(--line-strong);
border-radius: var(--radius-btn);
padding: 0 14px;
background: var(--gray-50);
transition: border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast);
}
.search-input-wrap:focus-within {
border-color: var(--brand-700);
box-shadow: var(--focus-ring);
background: var(--white);
}
.search-input-wrap svg {
width: 18px;
height: 18px;
flex-shrink: 0;
color: var(--gray-500);
}
.search-input-wrap input {
flex: 1;
border: none;
outline: none;
font-size: 15px;
padding: 14px 0;
color: var(--gray-900);
background: transparent;
}
.btn-busca {
background-color: var(--brand-700);
background-image: linear-gradient(180deg, #D7141E 0%, #CD121C 62%, #BF101A 100%);
color: var(--on-brand);
border: none;
border-radius: var(--radius-btn);
padding: 14px 30px;
font-size: 14px;
font-weight: 600;
letter-spacing: -0.008em;
cursor: pointer;
white-space: nowrap;
box-shadow: var(--btn-molde), var(--btn-shadow);
transition: filter var(--t-fast), transform 0.16s var(--ease-btn),
box-shadow 0.22s var(--ease-btn);
}
.btn-busca:hover {
filter: brightness(0.86);
transform: translateY(-1px);
box-shadow: var(--btn-molde), var(--btn-shadow-hover);
}
.btn-busca:active {
transform: translateY(0);
filter: brightness(0.78);
box-shadow: var(--btn-molde), var(--btn-shadow-active);
transition-duration: 0.06s;
}
@media (max-width: 768px) {
.search-section { --busca-sobe: 24px; }
.search-box { padding: 22px 20px; }
.search-form { flex-direction: column; align-items: stretch; }
.btn-busca { width: 100%; }
}
/* ===== SEÇÃO ÚLTIMOS ANÚNCIOS (slider) ===== */
.vehicles-section {
padding: 60px 0 70px;
background-color: var(--gray-100);
}
.section-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 24px;
margin-bottom: 32px;
padding-bottom: 18px;
border-bottom: 1px solid var(--line);
}
.section-header h2 {
font-size: 34px;
font-weight: 700;
color: var(--ink-900);
}
.slider-controls {
display: flex;
gap: 8px;
}
.slider-btn {
width: 38px;
height: 38px;
border-radius: var(--radius-btn);
border: 1.5px solid var(--line-strong);
background-color: var(--white);
color: var(--ink-900);
font-size: 22px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color var(--t-base), color var(--t-base),
border-color var(--t-base);
}
.slider-btn:hover {
background-color: var(--ink-900);
border-color: var(--ink-900);
color: var(--white);
}
.slider-btn:disabled {
background-color: var(--gray-100);
color: var(--gray-300);
border-color: var(--gray-200);
cursor: default;
}
.slider-wrapper {
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
margin: 0 -8px;
padding: 4px 8px 8px;
}
.slider-wrapper::-webkit-scrollbar { display: none; }
.slider-track {
display: flex;
gap: 20px;
}
.slider-track .card-veiculo {
flex: 0 0 calc(25% - 15px);
min-width: 0;
scroll-snap-align: start;
}
.vehicles-cta {
display: flex;
justify-content: center;
margin-top: 36px;
}
.vehicles-cta .btn {
padding: 14px 30px;
font-size: 14.5px;
}
/* No desktop a vitrine não rola: vira grade de 4 colunas (2 linhas de 4).
Abaixo de 1025px volta a ser carrossel, que é o que funciona no toque. */
@media (min-width: 1025px) {
.slider-wrapper {
overflow: visible;
scroll-snap-type: none;
margin: 0;
padding: 0;
}
.slider-track {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.slider-track .card-veiculo { flex: none; }
/* Sem rolagem, as setas não têm função */
.vehicles-section .slider-controls { display: none; }
}
@media (max-width: 1024px) {
.slider-track .card-veiculo { flex: 0 0 calc(33.33% - 14px); }
}
@media (max-width: 768px) {
.vehicles-section { padding: 40px 0 50px; }
.slider-track .card-veiculo { flex: 0 0 calc(70% - 10px); }
.section-header { flex-direction: row; align-items: center; }
.vehicles-cta { margin-top: 28px; }
.vehicles-cta .btn { width: 100%; max-width: 320px; }
}
@media (max-width: 480px) {
.slider-track .card-veiculo { flex: 0 0 calc(85%); }
}
/* ===== GRID DE CARDS ===== */
.grid-veiculos {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
@media (max-width: 1200px) {
.grid-veiculos { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
.grid-veiculos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.grid-veiculos { grid-template-columns: 1fr; }
}
/* ===== CARD DO VEÍCULO ===== */
.card-veiculo {
background-color: var(--white);
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--line);
/* Repouso plano: a sombra entra só na interação. Card branco flutuando
sobre cinza, repetido doze vezes, é o que dá cara de template. */
box-shadow: none;
transition: transform var(--t-base), box-shadow var(--t-base),
border-color var(--t-base);
display: flex;
flex-direction: column;
content-visibility: auto;
contain-intrinsic-size: 420px 400px;
}
/* Hover só onde existe hover.
Num celular não há ponteiro que entre e saia: o toque dispara :hover e ele
FICA — o card do último carro tocado voltava do histórico levantado e com a
foto ampliada, e só saía tocando em outro. `hover: hover` + `pointer: fine`
é o par que separa mouse de dedo (só `hover: hover` deixa passar caneta e
alguns Android que se dizem capazes de hover). No toque o feedback já vem
do próprio :active dos botões e da navegação, que é imediata. */
@media (hover: hover) and (pointer: fine) {
.card-veiculo:hover {
transform: translateY(-3px);
border-color: var(--line-strong);
box-shadow: var(--shadow-md);
}
.card-veiculo:hover .card-foto img { transform: scale(1.035); }
}
.card-veiculo > a {
display: flex;
flex-direction: column;
flex: 1;
}
.card-foto {
width: 100%;
overflow: hidden;
background-color: var(--gray-100);
position: relative; /* âncora da etiqueta de loja (.card-loja) */
}
.card-foto img {
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
/* Sem a transição no toque a foto nem chega a ter para onde animar, mas
manter o transform declarado aqui evita repaint à toa na rolagem. */
image-rendering: auto;
-webkit-image-rendering: auto;
}
.card-info {
padding: 18px 20px 20px;
flex: 1;
display: flex;
flex-direction: column;
}
.card-marca {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
color: var(--ink-500);
letter-spacing: 0.13em;
margin-bottom: 6px;
}
.card-info h3 {
font-family: var(--font-display);
font-size: 17px;
font-weight: 700;
color: var(--ink-900);
margin-bottom: 5px;
line-height: 1.15;
letter-spacing: -0.02em;
/* O feed manda a caixa inconsistente ("ONIX" mas "Xre") — normaliza aqui */
text-transform: uppercase;
}
.card-versao {
color: var(--gray-500);
font-size: 12.5px;
text-transform: uppercase;
margin-bottom: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
}
.card-specs {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 8px;
margin-bottom: 14px;
padding-bottom: 14px;
border-bottom: 1px solid var(--line-strong);
}
/* Ano · km · câmbio como uma linha só. Três pastilhas cinza por card,
multiplicadas pela vitrine inteira, viravam ruído visual. */
.card-specs span {
color: var(--gray-700);
font-size: 13px;
font-weight: 600;
}
.card-specs span + span::before {
content: "·";
margin-right: 8px;
color: var(--gray-300);
}
.card-info .preco {
/* Mesma tipografia do preço da página do veículo (.preco-detalhe): Inter
em 800, sem tracking negativo — a Archivo dos títulos deixava o número
mais estreito e com outra textura. */
font-family: var(--font-sans);
font-size: 24px;
font-weight: 800;
color: var(--ink-900);
margin: auto 0 0;
}
/* ===== ESTOQUE — BUSCA POR PALAVRAS (igual ao site do Seco) =====
Mora ACIMA do painel de filtros e fora dele. No celular o painel é um drawer
fechado, e uma busca lá dentro só serviria a quem já foi procurar filtro. */
.estoque-busca {
margin-bottom: 18px;
}
.estoque-busca__campo {
display: flex;
align-items: center;
gap: 10px;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius-btn);
padding: 0 14px;
transition: border-color var(--t-base), box-shadow var(--t-base);
}
.estoque-busca__campo:focus-within {
border-color: var(--brand-700);
box-shadow: var(--focus-ring);
}
.estoque-busca__campo > svg {
width: 18px;
height: 18px;
flex-shrink: 0;
color: var(--gray-500);
}
.estoque-busca input {
flex: 1;
min-width: 0;
border: 0;
background: none;
padding: 14px 0;
font: inherit;
font-size: 15.5px;
color: var(--ink-900);
}
.estoque-busca input:focus { outline: none; }
/* O X nativo do type=search varia por navegador; o nosso é igual em todos. */
.estoque-busca input::-webkit-search-cancel-button { display: none; }
.estoque-busca__limpar {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 26px;
height: 26px;
border: 0;
border-radius: 50%;
background: var(--gray-100);
color: var(--gray-700);
cursor: pointer;
transition: background-color var(--t-base), color var(--t-base);
}
.estoque-busca__limpar:hover { background: var(--gray-200); color: var(--ink-900); }
@media (max-width: 700px) {
.estoque-busca { margin-bottom: 14px; }
.estoque-busca input { padding: 12px 0; font-size: 16px; } /* 16px: abaixo disso o iOS dá zoom ao focar */
}
/* ===== PÁGINA ESTOQUE ===== */
.estoque-section {
padding: 50px 0 70px;
background-color: var(--gray-50);
min-height: 60vh;
}
.estoque-section h1 {
font-size: 40px;
font-weight: 700;
color: var(--ink-900);
margin-bottom: 8px;
}
.estoque-section .subtitulo {
color: var(--gray-500);
font-size: 15px;
margin-bottom: 0;
}
/* Cabeçalho da página (como no Seco): rótulo com filete, título e legenda
em cima de uma hairline. */
.estoque-section .pagina-head {
padding-bottom: 22px;
margin-bottom: 30px;
border-bottom: 1px solid var(--line);
}
.pagina-head .kicker {
display: flex;
align-items: center;
gap: 10px;
letter-spacing: 0.16em;
color: var(--brand-800);
margin-bottom: 12px;
}
.pagina-head .kicker::before {
content: "";
width: 22px;
height: 2px;
background: var(--brand-700);
flex-shrink: 0;
}
/* Painel de filtros */
.filtros-panel {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 22px 24px;
margin-bottom: 28px;
box-shadow: var(--shadow-sm);
}
.filtros-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1.2fr 1.2fr auto;
gap: 16px;
align-items: end;
}
/* Desktop: filtros viram coluna fixa à esquerda e os cards ocupam o resto.
Empilhados na vertical, cada campo ganha a largura inteira da coluna — os
rótulos dos selects param de ser cortados, o que acontecia ao espremer 7
controles numa faixa horizontal. */
@media (min-width: 1025px) {
.estoque-layout {
display: grid;
grid-template-columns: 268px minmax(0, 1fr);
gap: 26px;
align-items: start;
}
.filtros-panel {
margin-bottom: 0;
position: sticky;
top: 96px; /* abaixo do header fixo, acompanha a rolagem da lista */
max-height: calc(100dvh - 120px);
overflow-y: auto;
}
.filtros-grid,
.filtros-grid--com-loja {
grid-template-columns: 1fr;
gap: 18px;
align-items: stretch;
}
.filtros-grid .filtro-acoes { justify-content: stretch; }
.filtros-grid .btn-limpar { width: 100%; }
/* 3 por linha em qualquer largura de desktop: com a coluna de filtros ao
lado, 4 cards deixariam cada um estreito demais para a foto e a ficha. */
.estoque-layout .grid-veiculos { grid-template-columns: repeat(3, 1fr); }
}
.filtro-grupo {
display: flex;
flex-direction: column;
gap: 6px;
}
.filtro-grupo label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--gray-500);
}
.filtro-grupo select,
.filtro-grupo input[type="text"],
.filtro-grupo input[type="number"] {
padding: 11px 14px;
border: 1.5px solid var(--line-strong);
border-radius: var(--radius-btn);
font-size: 14px;
font-family: inherit;
color: var(--gray-900);
background: var(--white);
outline: none;
transition: border-color var(--t-fast), box-shadow var(--t-fast);
width: 100%;
appearance: none;
-webkit-appearance: none;
}
.filtro-grupo select {
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='%232E2E2E' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 32px;
cursor: pointer;
}
.filtro-grupo select:focus,
.filtro-grupo input:focus {
border-color: var(--brand-700);
box-shadow: var(--focus-ring);
}
.filtro-range {
display: flex;
align-items: center;
gap: 6px;
}
.filtro-range span {
color: var(--gray-300);
font-size: 14px;
flex-shrink: 0;
}
.filtro-range select,
.filtro-range input {
flex: 1;
min-width: 0;
}
.filtro-acoes {
justify-content: flex-end;
}
.btn-limpar {
padding: 11px 18px;
/* 1px, não 1,5px: meia unidade não cai em pixel inteiro e a borda sai
lavada em telas 1x. O peso que faltar vem do tom, não da espessura. */
border: 1px solid var(--line-strong);
border-radius: var(--radius-btn);
background: var(--white);
color: var(--gray-700);
font-size: 13px;
font-family: inherit;
font-weight: 600;
letter-spacing: -0.008em;
cursor: pointer;
white-space: nowrap;
transition: border-color var(--t-base), color var(--t-base),
background var(--t-base), box-shadow 0.22s var(--ease-btn);
}
.btn-limpar:hover {
border-color: var(--ink-900);
color: var(--ink-900);
background: var(--ink-50);
box-shadow: var(--shadow-sm);
}
.btn-limpar:active { background: var(--ink-100); box-shadow: none; }
.estoque-info {
margin-bottom: 16px;
min-height: 20px;
}
.filtro-contagem {
font-size: 13px;
color: var(--gray-500);
font-weight: 500;
}
.filtros-drawer-header { display: none; }
.filtros-mobile-bar { display: none; }
.btn-aplicar { display: none; }
@media (max-width: 1024px) {
.filtros-grid {
grid-template-columns: 1fr 1fr 1fr;
}
}
@media (max-width: 768px) {
.filtros-mobile-bar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
/* Utilitário: abre a folha de filtros, não confirma nada. Preto, pela mesma
razão do .btn-mapa. Quem confirma é o .btn-aplicar, que é vermelho. */
.btn-abrir-filtros {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--ink-900);
color: var(--white);
border: none;
border-radius: var(--radius-btn);
padding: 12px 20px;
font-size: 14px;
font-family: inherit;
font-weight: 600;
letter-spacing: -0.008em;
cursor: pointer;
box-shadow: var(--btn-molde), var(--btn-shadow);
transition: filter var(--t-fast), transform 0.16s var(--ease-btn),
box-shadow 0.22s var(--ease-btn);
}
.btn-abrir-filtros:active {
filter: brightness(1.35);
box-shadow: var(--btn-molde), var(--btn-shadow-active);
transition-duration: 0.06s;
}
/* Contagem + atalho de limpar, agrupados à direita da barra */
.filtros-mobile-bar__dir {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
/* Em tela estreita a contagem encolhe primeiro; o botão nunca é empurrado
para fora da barra. */
.filtros-mobile-bar__dir .filtro-contagem {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.btn-limpar-mobile {
display: inline-flex;
align-items: center;
gap: 5px;
background: var(--brand-soft);
color: var(--brand-900);
border: 1px solid var(--brand-700);
border-radius: var(--radius-btn);
padding: 7px 13px;
font-size: 12.5px;
font-family: inherit;
font-weight: 700;
line-height: 1;
white-space: nowrap;
cursor: pointer;
transition: background-color var(--t-fast), color var(--t-fast);
}
.btn-limpar-mobile:active {
background: var(--brand-700);
color: var(--on-brand);
}
.filtros-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 4000;
animation: fadeIn 0.25s ease;
}
.filtros-overlay.ativo { display: block; }
@keyframes fadeIn { from {opacity:0} to {opacity:1} }
.filtros-panel {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 4100;
border-radius: 0;
height: 100dvh;
max-height: 100dvh;
overflow-y: auto;
visibility: hidden;
transform: translateY(100%);
transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.38s;
padding: 0 20px calc(32px + env(safe-area-inset-bottom, 0px));
box-shadow: none;
border: none;
}
.filtros-panel.aberto {
visibility: visible;
transform: translateY(0);
transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s;
}
.filtros-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 0 16px;
border-bottom: 1px solid var(--line);
margin-bottom: 16px;
position: sticky;
top: 0;
background: var(--white);
z-index: 1;
}
.filtros-drawer-header span {
font-size: 17px;
font-weight: 700;
color: var(--ink-900);
}
.btn-fechar-filtros {
background: var(--gray-100);
border: none;
border-radius: var(--radius-btn);
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--gray-700);
transition: background-color var(--t-fast), color var(--t-fast);
}
.btn-fechar-filtros:hover {
background: var(--ink-900);
color: var(--white);
}
.filtros-grid { grid-template-columns: 1fr; }
.filtro-acoes { grid-column: 1; display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.btn-aplicar {
width: 100%;
padding: 15px;
background: var(--brand-700);
color: var(--white);
border: none;
border-radius: var(--radius-btn);
font-size: 15px;
font-weight: 600;
letter-spacing: -0.008em;
font-family: inherit;
cursor: pointer;
box-shadow: var(--btn-molde), var(--btn-shadow);
transition: filter var(--t-fast), box-shadow 0.22s var(--ease-btn);
}
.btn-aplicar { display: block; }
.btn-aplicar:active {
filter: brightness(0.78);
box-shadow: var(--btn-molde), var(--btn-shadow-active);
transition-duration: 0.06s;
}
.btn-limpar { width: 100%; text-align: center; padding: 14px; }
.estoque-info { display: none; }
}
/* ===== DETALHE DO VEÍCULO ===== */
/* Galeria — faixa de largura total logo abaixo do cabeçalho.
Três fotos por vez no desktop, uma no mobile. Full-bleed de propósito: a
foto é o que vende o carro, e dentro do container ela dividia a largura com
a ficha técnica. Não há miniaturas: com três fotos visíveis de uma vez, uma
tira embaixo repetiria o que já está na tela. */
.galeria-fullwidth .galeria-main {
position: relative;
overflow: hidden;
width: 100%;
background: var(--ink-900);
}
.galeria-fullwidth .galeria-viewport {
display: flex;
/* Sem gap no mobile; no desktop entra 6px (ver abaixo). A rolagem usa
passoSlide() = largura do slide + gap, então os dois casos fecham. */
gap: 0;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.galeria-fullwidth .galeria-viewport::-webkit-scrollbar { display: none; }
.galeria-fullwidth .galeria-slide {
flex: 0 0 33.3333%;
width: 33.3333%;
height: 380px;
cursor: zoom-in;
object-fit: cover;
scroll-snap-align: start;
display: block;
}
.galeria-fullwidth .galeria-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
background: rgba(0, 0, 0, 0.55);
color: var(--white);
border: none;
border-radius: 50%;
width: 42px;
height: 42px;
font-size: 24px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background var(--t-base), opacity var(--t-fast);
line-height: 1;
padding: 0 0 2px 0;
}
.galeria-fullwidth .galeria-arrow:hover { background: rgba(0, 0, 0, 0.85); }
.galeria-fullwidth .galeria-arrow-prev { left: 12px; }
.galeria-fullwidth .galeria-arrow-next { right: 12px; }
.galeria-fullwidth .galeria-counter {
position: absolute;
bottom: 12px;
right: 14px;
background: rgba(0, 0, 0, 0.7);
color: var(--white);
font-size: 12px;
font-weight: 600;
padding: 4px 10px;
border-radius: var(--radius-pill);
pointer-events: none;
}
/* Desktop: um respiro de 6px entre as fotos, na cor da página — as três
deixam de se ler como uma imagem só. O passo da rolagem no veiculo.js soma
este gap (passoSlide()), então as setas continuam caindo certinho. */
@media (min-width: 901px) {
.galeria-fullwidth .galeria-main { background: var(--white); }
.galeria-fullwidth .galeria-viewport { gap: 6px; }
.galeria-fullwidth .galeria-slide {
flex: 0 0 calc((100% - 12px) / 3);
width: calc((100% - 12px) / 3);
}
}
/* Poucas fotos (1 ou 2): no desktop não enchem as três colunas. Ficam no
centro, e as laterais mostram a própria primeira foto ampliada e
desfocada (--galeria-fundo, posto inline pelo veiculo.html) em vez de
uma faixa branca vazia. */
@media (min-width: 901px) {
.galeria--poucas .galeria-main {
background: var(--ink-900);
isolation: isolate;
}
.galeria--poucas .galeria-main::before {
content: "";
position: absolute;
inset: -40px;
z-index: -1;
background: var(--galeria-fundo) center / cover no-repeat;
filter: blur(28px) brightness(0.55) saturate(1.1);
}
.galeria--poucas .galeria-viewport { justify-content: center; }
/* Com 3 ou menos, tudo já está na tela: setas não têm para onde ir. */
.galeria--poucas .galeria-arrow,
.galeria--n3 .galeria-arrow { display: none; }
}
/* Uma foto só: no celular também não há o que rolar. */
.galeria--n1 .galeria-arrow { display: none; }
@media (max-width: 900px) {
/* Quadrada no celular (era 4:3): ~33% mais alta, a foto ocupa mais da tela
ao abrir a ficha. As fotos do XML são 4:3, então o object-fit: cover
corta um pouco das laterais — o carro fica no centro e continua inteiro. */
.galeria-fullwidth .galeria-slide {
flex: 0 0 100%;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
}
}
/* Seção detalhe */
.detalhe-section {
padding: 40px 0 60px;
background-color: var(--gray-50);
}
.detalhe-grid {
display: grid;
grid-template-columns: 1fr 340px;
gap: 36px;
align-items: start;
}
/* Grade do detalhe: ficha técnica (esquerda) | formulário (direita).
A coluna de fotos saiu daqui — a galeria virou faixa de largura total acima
da seção —, então some junto toda a mecânica de grid-row/sticky que existia
para segurar a foto ao lado da ficha. Descrição, equipamentos e vídeo
deixaram de ser três cartões soltos e passaram para dentro da própria ficha,
separados por filete. */
@media (max-width: 1100px) {
.detalhe-grid { gap: 26px; }
}
@media (max-width: 900px) {
.detalhe-grid { grid-template-columns: 1fr; gap: 22px; }
}
/* Info do veículo */
.info-veiculo {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 32px;
box-shadow: var(--shadow-sm);
}
.info-titulo-preco {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
margin-bottom: 22px;
padding-bottom: 18px;
border-bottom: 1px solid var(--line);
}
.info-veiculo h1 {
font-size: 22px;
font-weight: 800;
color: var(--gray-900);
letter-spacing: -0.01em;
}
.versao-detalhe {
color: var(--gray-500);
font-size: 13px;
margin-top: 4px;
}
.preco-detalhe {
font-size: 30px;
font-weight: 800;
color: var(--gray-900);
white-space: nowrap;
}
/* Quatro colunas: com a galeria fora da grade, a ficha ocupa a largura toda e
as oito especificações fecham em duas linhas limpas em vez de quatro. */
.specs-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0 20px;
margin-bottom: 28px;
}
.info-veiculo > .specs-grid:last-child { margin-bottom: -14px; }
.spec-item {
padding: 14px 16px;
border-bottom: 1px solid var(--line);
}
.spec-label {
display: block;
font-size: 11px;
text-transform: uppercase;
color: var(--gray-500);
letter-spacing: 0.5px;
margin-bottom: 4px;
font-weight: 500;
}
.spec-item strong {
font-size: 14px;
color: var(--gray-900);
font-weight: 700;
}
.flags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-bottom: 28px;
}
.flag {
background-color: var(--ink-900);
color: var(--white);
font-size: 11.5px;
font-weight: 600;
padding: 5px 13px;
border-radius: var(--radius-pill);
}
/* Observação */
.observacao,
.opcionais,
.youtube-embed {
border-top: 1px solid var(--line);
padding-top: 22px;
margin-top: 22px;
}
/* O último bloco da ficha não precisa empurrar o fundo do cartão */
.info-veiculo > :last-child { margin-bottom: 0; }
.observacao h3,
.opcionais h3,
.youtube-embed h3 {
font-size: 15px;
font-weight: 700;
margin-bottom: 10px;
color: var(--gray-900);
}
.observacao p {
font-size: 14px;
line-height: 1.7;
color: var(--gray-700);
}
/* Opcionais — em largura cheia cabem várias colunas */
.lista-opcionais {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 10px 24px;
list-style: none;
}
.lista-opcionais li {
font-size: 13.5px;
color: var(--gray-700);
padding-left: 22px;
position: relative;
}
.lista-opcionais li::before {
content: "✓";
color: var(--ink-900);
font-weight: 700;
position: absolute;
left: 0;
top: 0;
}
/* YouTube — 16:9 responsivo, limitado para não virar um telão no desktop */
.youtube-embed-frame {
position: relative;
width: 100%;
max-width: 860px;
aspect-ratio: 16 / 9;
border-radius: var(--radius-md);
overflow: hidden;
background: var(--ink-900);
}
.youtube-embed-frame iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: none;
}
/* Sidebar formulário */
.sidebar-form {
position: static;
}
/* Desktop: o card de contato acompanha a rolagem da ficha, logo abaixo do
cabeçalho (que também é sticky, ~81px).
Em tela baixa (notebook), o card é mais alto que a janela: aí o veiculo.js
troca o `top` por um valor NEGATIVO (--sidebar-top), e o card rola até o
botão de enviar aparecer e só então prende — pelo pé, não pela cabeça.
Assim ele fixa em qualquer altura de tela sem esconder nada. */
@media (min-width: 901px) {
.sidebar-form {
position: sticky;
top: var(--sidebar-top, 104px);
align-self: start;
}
}
/* Notebook (janela baixa): o card encolhe ~110px para caber inteiro abaixo
do cabeçalho — sem isto ele prenderia pelo pé e o título ficaria atrás do
cabeçalho. Só espaçamento: nenhum campo some. */
@media (min-width: 901px) and (max-height: 820px) {
.sidebar-form-inner { padding: 20px 20px; gap: 12px; }
.form-interesse-sidebar { gap: 9px; }
.form-interesse-sidebar .form-grupo { gap: 3px; }
.form-interesse-sidebar input,
.form-interesse-sidebar textarea { padding: 9px 13px; }
.form-interesse-sidebar textarea { height: 64px; }
.sidebar-form .btn-wpp-veiculo { padding-top: 12px; padding-bottom: 12px; }
}
.sidebar-form-inner {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 28px 24px;
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
gap: 16px;
}
.sidebar-form-titulo {
font-size: 14px;
color: var(--gray-700);
font-weight: 500;
}
.btn-wpp-veiculo {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--whatsapp);
color: var(--white);
padding: 14px 22px;
border-radius: var(--radius-btn);
font-size: 15px;
font-weight: 600;
letter-spacing: -0.008em;
transition: filter var(--t-fast), transform 0.16s var(--ease-btn),
box-shadow 0.22s var(--ease-btn);
white-space: nowrap;
/* O verde do WhatsApp é claro: o filete escuro de baixo pesa mais aqui
para o botão não virar um retângulo chapado. */
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30),
inset 0 -1px 0 rgba(0, 0, 0, 0.16), var(--btn-shadow);
}
.btn-wpp-veiculo:hover {
filter: brightness(1.06);
transform: translateY(-1px);
box-shadow: var(--btn-molde), var(--btn-shadow-hover);
}
.btn-wpp-veiculo:active {
transform: translateY(0);
filter: brightness(0.92);
box-shadow: var(--btn-molde), var(--btn-shadow-active);
transition-duration: 0.06s;
}
.form-interesse-sidebar {
display: flex;
flex-direction: column;
gap: 14px;
}
.form-interesse-sidebar .form-grupo {
display: flex;
flex-direction: column;
gap: 5px;
}
.form-interesse-sidebar label {
font-size: 13px;
font-weight: 600;
color: var(--gray-700);
}
.form-interesse-sidebar input,
.form-interesse-sidebar textarea {
padding: 11px 15px;
border: 1.5px solid var(--line-strong);
border-radius: var(--radius-btn);
font-family: inherit;
font-size: 14px;
color: var(--gray-900);
background: var(--gray-50);
outline: none;
transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
resize: none;
}
.form-interesse-sidebar input:focus,
.form-interesse-sidebar textarea:focus {
border-color: var(--brand-700);
box-shadow: var(--focus-ring);
background: var(--white);
}
/* Textarea: cantos suaves (pill total fica estranho em caixa alta) */
.form-interesse-sidebar textarea { border-radius: var(--radius-lg); }
.form-erro {
color: #dc3545;
font-size: 13px;
font-weight: 500;
display: none;
}
.btn-enviar-sidebar {
background-color: var(--brand-700);
background-image: linear-gradient(180deg, #D7141E 0%, #CD121C 62%, #BF101A 100%);
color: var(--on-brand);
border: none;
border-radius: var(--radius-btn);
padding: 15px;
font-size: 15px;
font-weight: 600;
letter-spacing: -0.008em;
font-family: inherit;
cursor: pointer;
box-shadow: var(--btn-molde), var(--btn-shadow);
transition: filter var(--t-fast), transform 0.16s var(--ease-btn),
box-shadow 0.22s var(--ease-btn);
}
.btn-enviar-sidebar:hover {
filter: brightness(0.86);
transform: translateY(-1px);
box-shadow: var(--btn-molde), var(--btn-shadow-hover);
}
.btn-enviar-sidebar:active {
transform: translateY(0);
filter: brightness(0.78);
box-shadow: var(--btn-molde), var(--btn-shadow-active);
transition-duration: 0.06s;
}
/* ===== LOCALIZAÇÃO / LOJAS ===== */
.localizacao-section {
background-color: var(--gray-100);
padding: 80px 0;
}
.localizacao-head {
margin-bottom: 32px;
padding-bottom: 18px;
border-bottom: 1px solid var(--line);
}
.localizacao-head h2 {
font-size: 34px;
font-weight: 700;
color: var(--ink-900);
}
.localizacao-sub {
font-size: 15px;
color: var(--gray-500);
margin-top: 14px;
}
/* Loja única na home: em vez de foto larga em cima e dados embaixo (que deixa
o card com quase mil pixels de altura), foto à esquerda e dados à direita.
:only-child porque com duas ou mais lojas os cards já dividem a linha entre
si — aí lado a lado ficaria espremido. */
@media (min-width: 901px) {
.localizacao-section .loja-card:only-child,
.contato-lojas-section .loja-card:only-child {
flex-direction: row;
align-items: stretch;
min-height: 340px;
}
.localizacao-section .loja-card:only-child .loja-card-foto,
.contato-lojas-section .loja-card:only-child .loja-card-foto {
flex: 0 0 56%;
/* Altura passa a vir da coluna de dados; object-fit cuida do recorte */
aspect-ratio: auto;
}
.localizacao-section .loja-card:only-child .loja-card-info,
.contato-lojas-section .loja-card:only-child .loja-card-info {
justify-content: center;
padding: 34px 38px;
}
/* Sem o margin-top:auto herdado do card empilhado, que abria um vão entre
o horário e os botões quando a foto era mais alta que o texto. */
.localizacao-section .loja-card:only-child .loja-card-acoes,
.contato-lojas-section .loja-card:only-child .loja-card-acoes {
margin-top: 22px;
}
}
/* Grade de unidades: uma coluna por loja, quantas o .env definir.
auto-fit + minmax mantém o layout certo com 1, 2 ou 3 lojas. */
.lojas-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 28px;
}
.loja-card {
background: var(--white);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
display: flex;
flex-direction: column;
transition: transform var(--t-base), box-shadow var(--t-base);
}
.loja-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.loja-card-foto {
/* Fachada é foto larga: em 16:9 a testeira da loja aparece inteira */
aspect-ratio: 16 / 9;
background: var(--ink-900);
overflow: hidden;
}
.loja-card-foto img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.loja-card-info {
padding: 24px 26px 26px;
display: flex;
flex-direction: column;
flex: 1;
}
.loja-card-info h3 {
font-size: 19px;
font-weight: 800;
color: var(--ink-900);
letter-spacing: -0.01em;
margin-bottom: 12px;
}
.loja-card-endereco {
font-size: 16px;
color: var(--ink-900);
font-weight: 600;
margin-bottom: 4px;
}
.loja-card-cidade {
font-size: 14px;
color: var(--gray-500);
margin-bottom: 16px;
}
/* Telefone da unidade — cada loja tem a sua linha */
.loja-card-tel {
display: flex;
align-items: center;
gap: 8px;
padding-top: 12px;
border-top: 1px solid var(--line);
font-size: 14px;
font-weight: 600;
}
.loja-card-tel svg { flex-shrink: 0; color: var(--brand-700); }
.loja-card-tel-sep { color: var(--gray-300); }
.loja-card-tel a { color: var(--ink-900); }
.loja-card-tel a:hover { color: var(--brand-800); }
/* Com telefone acima, o horário não repete a linha divisória */
.loja-card-tel + .loja-card-horario { border-top: 0; padding-top: 8px; }
/* Horário no card: é aqui que o cliente decide qual unidade visitar, e as
unidades podem ter horários diferentes. */
.loja-card-horario {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 12px 0 0;
margin-bottom: 20px;
border-top: 1px solid var(--line);
font-size: 13.5px;
color: var(--gray-500);
line-height: 1.7;
}
.loja-card-horario svg {
flex-shrink: 0;
color: var(--brand-700);
margin-top: 4px;
}
.loja-card-horario strong {
color: var(--ink-900);
font-weight: 700;
display: inline-block;
min-width: 62px;
}
/* Empurra as ações para a base: cards de alturas diferentes alinham os botões */
.loja-card-acoes {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: auto;
}
.loja-card .btn-mapa { margin-top: auto; }
.loja-card-acoes .btn-mapa { margin-top: 0; }
/* Os dois botões sólidos fora do .btn (WhatsApp e mapa) compartilham a mesma
superfície: só muda a cor de fundo. */
.btn-loja-whats,
.btn-mapa {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 13px 24px;
border-radius: var(--radius-btn);
font-size: 14px;
font-weight: 600;
letter-spacing: -0.008em;
box-shadow: var(--btn-molde), var(--btn-shadow);
transition: filter var(--t-fast), transform 0.16s var(--ease-btn),
box-shadow 0.22s var(--ease-btn);
}
.btn-loja-whats:hover,
.btn-mapa:hover {
/* O .btn-mapa é PRETO e o preto quase não clareia: por isso o passo aqui é
1.5, e não o 1.18 do sistema. O .btn-loja-whats é verde e aceitaria o
passo do sistema, mas divide o bloco — a 1.5 o verde do WhatsApp
estouraria, então ele tem o seu logo abaixo. */
filter: brightness(1.5);
transform: translateY(-1px);
box-shadow: var(--btn-molde), var(--btn-shadow-hover);
}
.btn-loja-whats:active,
.btn-mapa:active {
transform: translateY(0);
filter: brightness(1.15);
box-shadow: var(--btn-molde), var(--btn-shadow-active);
transition-duration: 0.06s;
}
/* O verde do WhatsApp reassume o passo curto do sistema — 1.5 o lavaria. */
.btn-loja-whats:hover { filter: brightness(1.06); }
.btn-loja-whats:active { filter: brightness(0.92); }
.btn-loja-whats {
background-color: var(--whatsapp);
color: var(--white);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30),
inset 0 -1px 0 rgba(0, 0, 0, 0.16), var(--btn-shadow);
}
.btn-loja-whats:hover { filter: brightness(1.06); }
/* ===== ETIQUETA DE LOJA NO CARD DO VEÍCULO ===== */
/* Fica logo abaixo do preço, antes do botão: some da foto (onde tapava o
carro) e vira parte da ficha. Só aparece quando a rede tem mais de uma loja. */
.card-loja {
display: flex;
align-items: center;
gap: 6px;
margin: -6px 0 12px;
color: var(--gray-500);
font-size: 12.5px;
font-weight: 600;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card-loja svg { flex-shrink: 0; color: var(--brand-700); }
/* ===== "ESTE VEÍCULO ESTÁ NA..." (página do veículo) ===== */
/* Uma linha discreta entre o preço e a ficha técnica, com a mesma hairline
das specs. Sem fundo nem ícone em destaque: é informação de apoio e não
deve competir com o preço logo acima. */
.veiculo-loja {
/* Grid, não flex-wrap: com flex, ao faltar espaço o texto pulava de linha e
deixava o pin sozinho numa linha só dele. Aqui o pin é uma coluna fixa,
então ele nunca se separa do nome da loja. */
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: start;
gap: 4px 10px;
padding: 14px 16px 16px;
border-bottom: 1px solid var(--line);
}
.veiculo-loja-pin {
flex-shrink: 0;
color: var(--brand-700);
transform: translateY(3px);
}
.veiculo-loja-texto {
font-size: 13px;
color: var(--gray-500);
line-height: 1.5;
}
.veiculo-loja-texto strong {
display: block;
color: var(--ink-900);
font-size: 14.5px;
font-weight: 700;
margin-bottom: 1px;
}
/* Endereço sempre na linha de baixo: tentar encaixá-lo ao lado do nome faz a
linha quebrar num ponto arbitrário quando o endereço é comprido. */
.veiculo-loja-texto span { display: block; }
.veiculo-loja-acoes {
display: flex;
align-items: baseline;
gap: 18px;
padding-top: 3px;
}
.veiculo-loja-acoes a {
font-size: 13px;
font-weight: 600;
color: var(--gray-700);
white-space: nowrap;
border-bottom: 1px solid var(--line-strong);
padding-bottom: 1px;
transition: color var(--t-fast), border-color var(--t-fast);
}
.veiculo-loja-acoes a:hover {
color: var(--brand-800);
border-color: var(--brand-800);
}
@media (max-width: 700px) {
/* Sem espaço para os links ao lado: eles descem para a segunda linha, mas
alinhados com o texto (coluna 2), não com o pin. */
.veiculo-loja { grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
.veiculo-loja-acoes { grid-column: 2; padding-top: 2px; }
}
/* Lojas na página de contato — mesma grade, sobre fundo claro */
/* Depois de canais + formulário: faixa própria, um tom abaixo do branco,
para a localização se ler como outra seção. */
.contato-lojas-section {
padding: 64px 0 80px;
background: var(--gray-50);
border-top: 1px solid var(--line);
}
@media (max-width: 768px) {
.contato-lojas-section { padding: 40px 0 56px; }
}
.contato-lojas-titulo {
font-size: 34px;
font-weight: 700;
color: var(--ink-900);
padding-bottom: 18px;
border-bottom: 1px solid var(--line);
}
.contato-lojas-sub {
font-size: 15px;
color: var(--gray-500);
margin: 14px 0 0;
}
.contato-lojas-titulo + .lojas-grid { margin-top: 32px; }
.contato-lojas-section .loja-card {
border: 1px solid var(--line);
box-shadow: var(--shadow-sm);
}
/* Geometria e resposta vêm do grupo acima; aqui só a cor. Era preto, e o
preto precisava de um passo de brilho próprio (1.55) para acender. No aço
o passo do sistema serve, então esta regra não guarda mais exceção
nenhuma — só o fundo. */
/* PRETO, não vermelho. No cartão da loja este botão convive com o verde do
WhatsApp e, na página do veículo, com o CTA vermelho — uma terceira cor
cheia ali seria ruído. E ele se separa do vermelho à vista: são 4,10:1
entre os dois, contra os 1,9:1 que obrigaram o template anterior a fundir
as duas famílias numa só. Ver a nota no topo do arquivo. */
.btn-mapa {
background-color: var(--ink-900);
color: var(--white);
}
@media (max-width: 900px) {
.localizacao-section { padding: 50px 0; }
.localizacao-head { margin-bottom: 28px; }
.localizacao-head h2 { font-size: 25px; }
.lojas-grid { grid-template-columns: 1fr; gap: 22px; }
.loja-card-acoes { flex-direction: column; }
.btn-mapa,
.btn-loja-whats { width: 100%; justify-content: center; }
}
/* ===== CTA SECTION (VK Integradora) ===== */
.cta-section-vkintegradora {
padding: 20px 0 80px;
background: var(--gray-100);
}
/* PR: cartão de alerta. Uma peça só, com FOTO: o carro (recorte do banner,
em alerta-bg.webp — arquivo próprio, para o card não depender do banner
que a loja pode apagar no admin) ocupa a direita, e um véu preto que vem
da esquerda segura o texto. Título, uma linha e dois botões — sem ícone,
sem passos, sem duas cores no título: o carro já é o enfeite. */
.cta-card {
position: relative;
overflow: hidden;
isolation: isolate;
border-radius: var(--radius-xl);
background-color: var(--ink-800);
min-height: 320px;
display: flex;
align-items: center;
padding: 56px 60px;
box-shadow: 0 2px 4px rgba(16, 24, 40, 0.06), 0 30px 60px -28px rgba(16, 24, 40, 0.45);
}
/* A foto numa camada própria, à direita, que SE DISSOLVE no preto pela
esquerda (máscara) — sem emenda reta entre a foto e o fundo. */
.cta-card::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 56%;
z-index: -1;
background: url("/assets/images/alerta-bg.webp") right center / cover no-repeat;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.5) 22%, #000 50%);
mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.5) 22%, #000 50%);
}
.cta-card-text {
max-width: 460px;
display: flex;
flex-direction: column;
}
.cta-card-kicker {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
margin-bottom: 14px;
}
.cta-card-text h2 {
font-size: 34px;
font-weight: 800;
line-height: 1.1;
color: var(--white);
margin-bottom: 14px;
}
.cta-card-text p {
font-size: 15.5px;
color: rgba(255, 255, 255, 0.70);
line-height: 1.6;
margin-bottom: 28px;
}
.cta-card-acoes {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
/* Herda a aparência de .btn.btn-primary; aqui só tamanho e a seta. */
.cta-card-btn {
white-space: nowrap;
padding: 15px 26px;
font-size: 14.5px;
}
.cta-card-btn svg { width: 16px; height: 16px; transition: transform var(--t-fast); }
.cta-card-btn:hover svg { transform: translateX(3px); }
/* Segunda opção: fantasma claro sobre o preto, mesma altura do primário. */
.cta-card-wpp {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 14px 22px;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: var(--radius-btn);
font-size: 14.5px;
font-weight: 600;
color: var(--white);
transition: background-color var(--t-fast), border-color var(--t-fast);
}
.cta-card-wpp svg { width: 17px; height: 17px; color: var(--whatsapp); }
.cta-card-wpp:hover {
background-color: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.40);
}
/* Tablet e celular: a foto vira faixa no topo do cartão e o texto vem
embaixo, no preto — sobre a foto inteira o texto brigaria com o carro. */
@media (max-width: 900px) {
.cta-card {
display: block;
min-height: 0;
padding: 0 0 36px;
}
.cta-card::before {
position: static;
width: auto;
z-index: auto;
-webkit-mask-image: none;
mask-image: none;
display: block;
height: 240px;
background:
linear-gradient(180deg, rgba(11, 11, 12, 0) 45%, var(--ink-800) 100%),
url("/assets/images/alerta-bg.webp") center 40% / cover no-repeat;
}
.cta-card-text { padding: 4px 36px 0; max-width: none; }
.cta-card-text h2 { font-size: 28px; }
}
@media (max-width: 600px) {
.cta-card { padding-bottom: 32px; }
.cta-card::before { height: 190px; }
.cta-card-text { padding: 4px 24px 0; }
.cta-card-text h2 { font-size: 25px; }
.cta-card-text p { font-size: 14.5px; margin-bottom: 22px; }
.cta-card-acoes { flex-direction: column; align-items: stretch; }
.cta-card-btn, .cta-card-wpp { width: 100%; justify-content: center; }
}
/* Legacy CTA (unused but kept for other pages) */
.cta-section {
background:
linear-gradient(135deg, var(--ink-900) 0%, var(--ink-800) 100%);
color: var(--white);
padding: 70px 20px;
text-align: center;
position: relative;
overflow: hidden;
}
.cta-section h2 {
font-size: 32px;
font-weight: 800;
margin-bottom: 12px;
letter-spacing: -0.01em;
}
.cta-section p {
color: var(--silver-300);
font-size: 16px;
margin-bottom: 28px;
max-width: 540px;
margin-left: auto;
margin-right: auto;
}
.cta-section .btn {
position: relative;
padding: 14px 30px;
font-size: 15px;
}
/* ===== CONTATO — HERO ===== */
.contato-hero {
background:
linear-gradient(135deg, var(--ink-900) 0%, var(--ink-800) 100%);
padding: 60px 20px;
text-align: center;
position: relative;
overflow: hidden;
}
.contato-hero::before {
content: "";
position: absolute;
bottom: -80px;
left: -80px;
width: 300px;
height: 300px;
background: radial-gradient(circle, var(--silver-300) 0%, transparent 70%);
opacity: 0.14;
pointer-events: none;
}
.contato-hero h1 {
font-size: 38px;
font-weight: 800;
color: var(--white);
letter-spacing: -0.01em;
position: relative;
}
/* ===== CONTATO — CANAIS + FORMULÁRIO =====
Duas colunas: à esquerda os canais diretos (telefone, WhatsApp, e-mail,
Instagram) empilhados como botões; à direita o formulário. A localização
vem depois, em seção própria. No celular empilha nessa mesma ordem. */
.contato-principal {
padding: 64px 0 72px;
background: var(--white);
}
.contato-principal-grid {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: 56px;
align-items: start;
}
.contato-canais .kicker {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.contato-canais .kicker::before {
content: "";
width: 22px;
height: 2px;
background: var(--brand-700);
flex-shrink: 0;
}
.contato-form-titulo {
font-size: 32px;
font-weight: 800;
color: var(--ink-900);
margin-bottom: 10px;
letter-spacing: -0.02em;
}
.contato-form-sub {
color: var(--gray-500);
font-size: 15px;
line-height: 1.65;
margin-bottom: 28px;
max-width: 420px;
}
.contato-cards {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Cada canal é um botão-linha: ícone, rótulo + valor, seta. */
.contato-card {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 18px;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: var(--white);
transition: box-shadow var(--t-base), transform var(--t-base),
border-color var(--t-base);
}
.contato-card:hover {
border-color: var(--line-strong);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.contato-card-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, var(--ink-900), var(--ink-800));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}
.contato-card-icon svg { width: 22px; height: 22px; }
.contato-card--whatsapp .contato-card-icon {
background: linear-gradient(135deg, var(--whatsapp), var(--whatsapp-dark));
box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25);
}
.contato-card--instagram .contato-card-icon {
background: linear-gradient(45deg, #F58529 0%, #DD2A7B 50%, #8134AF 100%);
box-shadow: 0 4px 12px rgba(221, 42, 123, 0.25);
}
.contato-card-texto {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
flex: 1;
}
.contato-card-label {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--gray-500);
}
.contato-card-valor {
font-size: 16px;
font-weight: 700;
color: var(--ink-900);
overflow-wrap: anywhere;
}
.contato-card-seta {
flex-shrink: 0;
color: var(--gray-500);
transition: transform var(--t-fast), color var(--t-fast);
}
.contato-card:hover .contato-card-seta {
color: var(--brand-700);
transform: translateX(3px);
}
@media (max-width: 1024px) and (min-width: 769px) {
.contato-principal-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
.contato-form-card { padding: 28px; }
}
/* ===== CONTATO — FORMULÁRIO ===== */
.contato-form-card {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius-xl);
padding: 36px;
display: flex;
flex-direction: column;
gap: 18px;
box-shadow: var(--shadow-md);
position: relative;
}
/* Filete vermelho no topo do cartão: marca o formulário como a peça
principal da página sem precisar de outro título. */
.contato-form-card::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
background: linear-gradient(90deg, var(--brand-900), var(--brand-700) 50%, var(--brand-900));
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.form-grupo {
display: flex;
flex-direction: column;
gap: 6px;
}
.form-grupo label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.6px;
color: var(--gray-500);
}
.form-grupo input,
.form-grupo textarea {
padding: 13px 16px;
border: 1.5px solid var(--line-strong);
border-radius: var(--radius-btn);
font-size: 14.5px;
font-family: inherit;
color: var(--gray-900);
background: var(--gray-50);
outline: none;
transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
resize: none;
}
.form-grupo textarea { border-radius: var(--radius-lg); }
.form-grupo input:focus,
.form-grupo textarea:focus {
border-color: var(--brand-700);
box-shadow: var(--focus-ring);
background: var(--white);
}
/* Envio do formulário de contato: mesmo acento dos outros CTAs do site
(buscar, tenho interesse), para o botão principal da página não sumir. */
.btn-enviar {
background-color: var(--brand-700);
background-image: linear-gradient(180deg, #D7141E 0%, #CD121C 62%, #BF101A 100%);
color: var(--on-brand);
border: none;
border-radius: var(--radius-btn);
padding: 15px;
font-size: 15px;
font-weight: 600;
letter-spacing: -0.008em;
font-family: inherit;
cursor: pointer;
box-shadow: var(--btn-molde), var(--btn-shadow);
transition: filter var(--t-fast), transform 0.16s var(--ease-btn),
box-shadow 0.22s var(--ease-btn);
margin-top: 4px;
}
.btn-enviar:hover {
filter: brightness(0.86);
transform: translateY(-1px);
box-shadow: var(--btn-molde), var(--btn-shadow-hover);
}
.btn-enviar:active {
transform: translateY(0);
filter: brightness(0.78);
box-shadow: var(--btn-molde), var(--btn-shadow-active);
transition-duration: 0.06s;
}
@media (max-width: 768px) {
.contato-hero { padding: 32px 20px; }
.contato-hero h1 { font-size: 26px; }
.contato-principal { padding: 32px 0 44px; }
.contato-principal-grid { grid-template-columns: 1fr; gap: 32px; }
.contato-card { padding: 14px 16px; gap: 14px; }
.contato-card-icon { width: 42px; height: 42px; }
.contato-card-icon svg { width: 19px; height: 19px; }
.contato-card-valor { font-size: 14.5px; }
.contato-form-titulo { font-size: 25px; }
.contato-form-sub { font-size: 14px; margin-bottom: 20px; }
.form-row { grid-template-columns: 1fr; }
.contato-form-card { padding: 24px 18px; }
}
/* ===== POLÍTICA DE PRIVACIDADE ===== */
.privacidade-hero {
background:
linear-gradient(135deg, var(--ink-900) 0%, var(--ink-800) 100%);
padding: 60px 20px 70px;
text-align: center;
position: relative;
overflow: hidden;
color: var(--white);
}
.privacidade-hero::before {
content: "";
position: absolute;
top: -80px;
right: -80px;
width: 300px;
height: 300px;
background: radial-gradient(circle, var(--silver-300) 0%, transparent 70%);
opacity: 0.14;
pointer-events: none;
}
.privacidade-hero .hero-tag {
background: rgba(255, 255, 255, 0.12);
color: var(--white);
margin-bottom: 18px;
border-color: rgba(255, 255, 255, 0.2);
}
.privacidade-hero .hero-tag::before { background: var(--silver-300); }
.privacidade-hero h1 {
font-size: clamp(28px, 4vw, 38px);
font-weight: 800;
color: var(--white);
letter-spacing: -0.01em;
margin-bottom: 16px;
position: relative;
}
.privacidade-hero p {
max-width: 720px;
margin: 0 auto;
font-size: 15.5px;
line-height: 1.7;
color: var(--silver-300);
position: relative;
}
.privacidade-hero p strong { color: var(--white); font-weight: 600; }
.privacidade-update {
display: inline-block;
margin-top: 22px;
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.4px;
text-transform: uppercase;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.16);
color: var(--silver-300);
padding: 7px 14px;
border-radius: var(--radius-btn);
position: relative;
}
.privacidade-conteudo {
background: var(--white);
}
.privacidade-layout {
display: grid;
grid-template-columns: 260px 1fr;
gap: 48px;
padding: 60px 0 80px;
align-items: start;
background: var(--white);
}
/* Índice (sidebar) */
.privacidade-toc {
position: sticky;
top: 100px;
background: var(--gray-50);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 22px 22px 18px;
}
.privacidade-toc-titulo {
font-size: 11px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--gray-500);
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 2px solid;
border-image: var(--accent-gradient) 1;
display: inline-block;
}
.privacidade-toc ol {
list-style: none;
counter-reset: toc;
margin: 0;
padding: 0;
}
.privacidade-toc ol li {
counter-increment: toc;
margin-bottom: 4px;
}
.privacidade-toc ol li a {
display: flex;
align-items: baseline;
gap: 8px;
font-size: 13px;
line-height: 1.45;
color: var(--gray-700);
padding: 7px 10px;
border-radius: var(--radius-sm);
transition: background-color var(--t-fast), color var(--t-fast);
font-weight: 500;
}
.privacidade-toc ol li a::before {
content: counter(toc, decimal-leading-zero);
font-size: 11px;
font-weight: 700;
color: var(--gray-300);
flex-shrink: 0;
font-variant-numeric: tabular-nums;
}
.privacidade-toc ol li a:hover {
background: var(--white);
color: var(--ink-900);
}
.privacidade-toc ol li a:hover::before { color: var(--ink-900); }
/* Conteúdo */
.privacidade-section {
max-width: 760px;
background: transparent;
}
.privacidade-section h2 {
font-size: 22px;
font-weight: 800;
color: var(--ink-900);
margin-top: 40px;
margin-bottom: 14px;
letter-spacing: -0.01em;
line-height: 1.3;
scroll-margin-top: 100px;
}
.privacidade-section h2:first-child { margin-top: 0; }
.privacidade-section p {
font-size: 15px;
line-height: 1.75;
color: var(--gray-700);
margin-bottom: 14px;
}
.privacidade-section strong { color: var(--ink-900); font-weight: 600; }
.privacidade-section a {
color: var(--ink-900);
font-weight: 600;
border-bottom: 1px solid var(--silver-300);
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.privacidade-section a:hover { border-bottom-color: var(--ink-900); }
.privacidade-section ul {
list-style: none;
margin: 0 0 18px;
padding: 0;
}
.privacidade-section ul li {
position: relative;
padding-left: 26px;
margin-bottom: 10px;
font-size: 15px;
line-height: 1.7;
color: var(--gray-700);
}
.privacidade-section ul li::before {
content: "";
position: absolute;
left: 0;
top: 11px;
width: 14px;
height: 2px;
background: var(--ink-900);
border-radius: 2px;
}
@media (max-width: 900px) {
.privacidade-layout {
grid-template-columns: 1fr;
gap: 28px;
padding: 40px 0 60px;
}
.privacidade-toc {
position: static;
padding: 18px 18px 14px;
}
.privacidade-toc ol {
columns: 2;
column-gap: 16px;
}
.privacidade-toc ol li { break-inside: avoid; }
.privacidade-section h2 { font-size: 20px; margin-top: 32px; }
.privacidade-section h2::before { width: 22px; margin-right: 10px; }
.privacidade-hero { padding: 45px 20px 55px; }
}
@media (max-width: 560px) {
.privacidade-toc ol { columns: 1; }
}
/* ===== FOLHA DE VENDEDORES =====
Aparece quando o cliente toca em qualquer botão de WhatsApp e a loja tem
mais de um número. É uma folha que sobe de baixo no celular (onde o polegar
está) e um cartão centrado no desktop — o mesmo componente, duas ancoragens.
z-index acima do WhatsApp flutuante (9000), que é um dos gatilhos. */
.vendedores-folha {
position: fixed;
inset: 0;
z-index: 9600;
display: flex;
align-items: flex-end;
justify-content: center;
}
.vendedores-fundo {
position: absolute;
inset: 0;
background: rgba(6, 10, 12, 0.62);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
opacity: 0;
transition: opacity 0.26s var(--ease-btn);
}
.vendedores-folha.is-aberta .vendedores-fundo { opacity: 1; }
/* Recebe o foco ao abrir (tabindex="-1"), mas sem anel: quem marca o diálogo
é o próprio painel sobre o fundo escurecido, não uma borda. */
.vendedores-painel:focus,
.vendedores-painel:focus-visible { outline: none; }
.vendedores-painel {
position: relative;
width: 100%;
max-width: 460px;
background: var(--white);
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
box-shadow: var(--shadow-lg);
padding: 10px 20px calc(18px + env(safe-area-inset-bottom));
transform: translateY(18px);
opacity: 0;
transition: transform 0.3s var(--ease-btn), opacity 0.24s var(--ease-btn);
max-height: 86vh;
overflow-y: auto;
overscroll-behavior: contain;
}
.vendedores-folha.is-aberta .vendedores-painel {
transform: translateY(0);
opacity: 1;
}
/* Alça: o sinal de "isto sobe e desce" que uma folha de celular tem. */
.vendedores-alca {
width: 38px;
height: 4px;
border-radius: var(--radius-pill);
background: var(--gray-300);
margin: 0 auto 14px;
}
.vendedores-cabeca {
position: relative;
padding: 0 44px 14px 2px;
border-bottom: 1px solid var(--line);
margin-bottom: 6px;
}
.vendedores-cabeca h2 {
font-family: var(--font-display);
font-size: 19px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--ink-900);
margin: 0 0 3px;
}
.vendedores-cabeca p {
font-size: 13px;
line-height: 1.45;
color: var(--gray-500);
margin: 0;
}
.vendedores-fechar {
position: absolute;
top: -4px;
right: -6px;
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: var(--radius-pill);
background: transparent;
color: var(--gray-500);
cursor: pointer;
transition: background var(--t-fast), color var(--t-fast);
}
.vendedores-fechar svg { width: 17px; height: 17px; }
.vendedores-fechar:hover { background: var(--ink-50); color: var(--ink-900); }
.vendedores-lista {
display: flex;
flex-direction: column;
}
/* Cada vendedor é uma linha alta, com inicial à esquerda e o ícone do
WhatsApp à direita. Separadas por hairline, não por cartão: cinco cartões
empilhados viram uma lista de caixas, e o que importa aqui é o nome. */
.vendedores-item {
display: flex;
align-items: center;
gap: 13px;
padding: 13px 4px;
border-bottom: 1px solid var(--line);
color: var(--ink-900);
transition: background var(--t-fast);
}
.vendedores-item:last-child { border-bottom: 0; }
.vendedores-item:hover,
.vendedores-item:focus-visible {
background: var(--gray-50);
outline: none;
}
.vendedores-item:focus-visible { box-shadow: var(--focus-ring-inset); }
.vendedores-item:active { background: var(--gray-100); }
.vendedores-item__ini {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: var(--radius-pill);
background: var(--brand-soft);
color: var(--brand-900);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.02em;
}
.vendedores-item__txt {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.vendedores-item__txt strong {
font-size: 15px;
font-weight: 600;
letter-spacing: -0.01em;
}
.vendedores-item__txt small {
font-size: 12.5px;
color: var(--gray-500);
font-variant-numeric: tabular-nums;
}
/* O ícone é verde do WhatsApp, não da marca: é ele que diz para onde o
toque leva, e é a única coisa verde do cartão. */
.vendedores-item__wpp {
width: 21px;
height: 21px;
margin-left: auto;
flex-shrink: 0;
color: var(--whatsapp);
transition: transform var(--t-fast);
}
.vendedores-item:hover .vendedores-item__wpp { transform: scale(1.08); }
/* A partir do tablet a folha vira cartão centrado: no desktop o conteúdo
colado na borda de baixo da janela não tem por quê. */
@media (min-width: 700px) {
.vendedores-folha { align-items: center; }
.vendedores-painel {
border-radius: var(--radius-lg);
padding: 22px 24px 18px;
transform: translateY(10px) scale(0.98);
}
.vendedores-folha.is-aberta .vendedores-painel {
transform: translateY(0) scale(1);
}
.vendedores-alca { display: none; }
.vendedores-cabeca { padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
.vendedores-fundo,
.vendedores-painel { transition: none; }
}
/* ===== WHATSAPP FLUTUANTE ===== */
/* O único botão do site que pode ter sombra colorida: ele flutua sobre
conteúdo qualquer e a cor é o que o cola no verde do WhatsApp. Mesmo assim,
metade do halo que tinha — e uma sombra neutra por baixo, para ele existir
também quando passa sobre uma foto clara. */
.whatsapp-float {
position: fixed;
bottom: 28px;
right: 28px;
width: 58px;
height: 58px;
background: var(--whatsapp);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 9000;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34),
inset 0 -1px 0 rgba(0, 0, 0, 0.16),
0 2px 6px rgba(16, 24, 40, 0.16),
0 10px 24px -8px rgba(30, 190, 93, 0.55);
transition: transform 0.18s var(--ease-btn), box-shadow 0.22s var(--ease-btn),
filter var(--t-fast);
}
.whatsapp-float:hover {
/* Sobe, não incha: escalar um círculo de 58px em 8% borra o ícone dentro
dele. Subir 2px dá o mesmo "vem comigo" com o desenho intacto. */
transform: translateY(-2px);
filter: brightness(1.06);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34),
inset 0 -1px 0 rgba(0, 0, 0, 0.16),
0 2px 6px rgba(16, 24, 40, 0.16),
0 16px 32px -10px rgba(30, 190, 93, 0.62);
}
.whatsapp-float:active {
transform: translateY(0);
filter: brightness(0.97);
transition-duration: 0.06s;
}
@media (max-width: 600px) {
.whatsapp-float { bottom: 20px; right: 20px; }
}
body.filtros-abertos .whatsapp-float,
body.cookie-aberto .whatsapp-float,
body.menu-aberto .whatsapp-float,
body.vendedores-abertos .whatsapp-float { display: none !important; }
/* Trava a rolagem do fundo enquanto a folha está aberta */
body.vendedores-abertos { overflow: hidden; }
/* reCAPTCHA v3 — badge flutuante escondido; disclaimer aparece nos formulários */
.grecaptcha-badge { visibility: hidden !important; }
.recaptcha-disclaimer {
font-size: 11px;
color: var(--gray-500);
line-height: 1.5;
margin-top: 12px;
text-align: center;
}
.recaptcha-disclaimer a {
color: var(--gray-700);
text-decoration: underline;
}
.recaptcha-disclaimer a:hover { color: var(--ink-900); }
.form-privacidade {
font-size: 12px;
color: var(--gray-500);
line-height: 1.5;
margin-top: 12px;
text-align: center;
}
.form-privacidade a {
color: var(--gray-700);
text-decoration: underline;
}
.form-privacidade a:hover { color: var(--ink-900); }
/* ===== AVISO ===== */
.aviso {
color: var(--gray-500);
font-size: 15px;
padding: 30px 0;
text-align: center;
}
.aviso a { color: var(--ink-900); font-weight: 600; text-decoration: underline; text-decoration-color: var(--silver-300); }
/* ===== FOOTER (VK Integradora) ===== */
.vkintegradora-footer {
background: var(--ink-800);
color: rgba(255, 255, 255, 0.82);
}
/* Mesmo tratamento do cabeçalho: preto chapado separado por hairline, sem
barra colorida. */
.vkintegradora-footer-topbar {
background: transparent;
border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.vkintegradora-footer-topbar-inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
}
.vkintegradora-footer-topbar-line { display: none; }
.vkintegradora-footer-body {
padding: 56px 0 48px;
}
.vkintegradora-footer-container {
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 48px;
align-items: start;
}
.vkintegradora-footer-col {
display: flex;
flex-direction: column;
gap: 16px;
}
.vkintegradora-footer-logo {
display: inline-block;
transition: opacity 0.2s ease;
}
.vkintegradora-footer-logo:hover { opacity: 0.85; }
.vkintegradora-footer-logo img {
/* PR: o brasão precisa de altura para a faixa "COMPRA · VENDA · TROCA"
ser lida — 96px dá ~166px de largura. */
/* 38px, a mesma altura do cabeçalho — desceu de 48 junto com ele, a pedido
do cliente. Aqui a arte é a INVERTIDA (branca, "H" vermelho), porque o
rodapé é preto; o arquivo é o logo-rodape.webp e é independente do
logo.webp, então esta altura pode voltar a ser própria quando quiser. */
height: 96px;
width: auto;
display: block;
}
.vkintegradora-footer-tagline {
font-size: 13.5px;
color: rgba(255,255,255,0.55);
font-style: italic;
line-height: 1.5;
letter-spacing: 0.2px;
}
.vkintegradora-footer-social {
display: flex;
gap: 10px;
margin-top: 4px;
}
.vkintegradora-social-btn {
width: 40px;
height: 40px;
border-radius: var(--radius-btn);
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.14);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.25s ease;
color: rgba(255,255,255,0.7);
}
.vkintegradora-social-btn svg {
width: 18px;
height: 18px;
fill: currentColor;
}
/* Aqui o hover é --brand-700, o vermelho da marca — e esta é a diferença
desta paleta para a do template, que precisava do tom clareado porque o aço
dele dava 1,9:1 contra o preto. O vermelho dá 4,10:1: ele acende sozinho
sobre o rodapé, e o ícone inverte para BRANCO (4,79:1 sobre o vermelho) em
vez de para o preto. O botão de rede social vira a marca, não uma peça
clara genérica. */
.vkintegradora-social-btn:hover {
background: var(--brand-700);
border-color: var(--brand-700);
color: var(--white);
transform: translateY(-1px);
/* Sobre o preto do rodapé uma sombra neutra não existe — a única que se vê
é a da própria cor. É a exceção que confirma a regra do sistema. */
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30),
0 8px 18px -6px rgba(215, 20, 30, 0.45);
}
.vkintegradora-social-btn:active {
transform: translateY(0);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.vkintegradora-footer-heading {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.16em;
color: rgba(255, 255, 255, 0.45);
padding-bottom: 14px;
margin-bottom: 4px;
}
.vkintegradora-footer-hours {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.vkintegradora-footer-hours li {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13.5px;
gap: 12px;
padding-bottom: 10px;
border-bottom: 1px dashed rgba(255,255,255,0.08);
}
.vkintegradora-footer-hours li:last-child { border-bottom: none; }
.vkintegradora-hours-day {
color: rgba(255,255,255,0.65);
font-size: 13px;
}
.vkintegradora-hours-time {
color: #ffffff;
font-weight: 600;
font-size: 13px;
text-align: right;
}
.vkintegradora-hours-closed .vkintegradora-hours-time {
color: rgba(255,255,255,0.35);
font-weight: 400;
}
/* Horário por unidade — mesma separação usada na coluna de endereços */
.vkintegradora-footer-horario + .vkintegradora-footer-horario {
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid rgba(255,255,255,0.10);
}
.vkintegradora-footer-hours-nota {
margin-top: 14px;
font-size: 12.5px;
color: rgba(255,255,255,0.45);
font-style: italic;
}
/* Cada unidade da rede no rodapé: nome + endereço + link do mapa */
.vkintegradora-footer-loja + .vkintegradora-footer-loja {
margin-top: 20px;
padding-top: 18px;
border-top: 1px solid rgba(255,255,255,0.10);
}
.vkintegradora-footer-loja-nome {
font-size: 13px;
font-weight: 700;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 0.6px;
margin-bottom: 8px;
}
.vkintegradora-footer-address {
font-style: normal;
display: flex;
flex-direction: column;
gap: 6px;
}
.vkintegradora-footer-address p {
font-size: 13.5px;
color: rgba(255,255,255,0.75);
line-height: 1.5;
}
.vkintegradora-footer-address strong { color: #ffffff; }
.vkintegradora-footer-map-btn {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
font-weight: 700;
color: var(--brand-400);
text-transform: uppercase;
letter-spacing: 0.8px;
transition: all 0.2s ease;
margin-top: 4px;
width: fit-content;
}
.vkintegradora-footer-map-btn svg {
width: 14px;
height: 14px;
fill: currentColor;
}
.vkintegradora-footer-map-btn:hover {
color: #ffffff;
gap: 10px;
}
.vkintegradora-footer-links {
list-style: none;
display: flex;
flex-direction: column;
gap: 4px;
}
.vkintegradora-footer-links a {
font-size: 14px;
color: rgba(255, 255, 255, 0.68);
padding: 6px 0;
display: inline-block;
transition: color var(--t-fast);
}
.vkintegradora-footer-links a:hover { color: #ffffff; }
.vkintegradora-footer-bottom {
background: transparent;
border-top: 1px solid rgba(255, 255, 255, 0.07);
padding: 20px 0;
}
.vkintegradora-footer-bottom .vkintegradora-footer-container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.vkintegradora-footer-copy {
font-size: 12.5px;
color: rgba(255,255,255,0.4);
line-height: 1.4;
}
.vkintegradora-footer-dev {
font-size: 12px;
color: rgba(255, 255, 255, 0.55);
display: flex;
align-items: center;
gap: 8px;
transition: color var(--t-fast);
}
.vkintegradora-footer-dev strong {
color: #ffffff;
font-weight: 700;
}
/* A logo é branca sobre transparente: quem a alinha ao "Desenvolvido por" é a
opacidade, não a cor. Em repouso fica um passo acima do texto para o desenho
não sumir; no hover, os dois sobem juntos. */
.vkintegradora-footer-dev img {
height: 15px;
width: auto;
display: block;
opacity: 0.72;
transition: opacity var(--t-fast);
}
.vkintegradora-footer-dev:hover { color: rgba(255, 255, 255, 0.8); }
.vkintegradora-footer-dev:hover strong { color: var(--brand-400); }
.vkintegradora-footer-dev:hover img { opacity: 1; }
@media (max-width: 1024px) {
.vkintegradora-footer-container {
grid-template-columns: 1fr 1fr;
gap: 36px 32px;
}
.vkintegradora-footer-col--logo {
grid-column: 1 / -1;
flex-direction: row;
align-items: flex-start;
gap: 32px;
flex-wrap: wrap;
}
}
@media (max-width: 600px) {
.vkintegradora-footer-body { padding: 40px 0 36px; }
.vkintegradora-footer-container {
grid-template-columns: 1fr;
gap: 32px;
}
.vkintegradora-footer-col--logo {
flex-direction: column;
gap: 16px;
}
/* Sem altura própria: o desktop também está em 48px, e repetir o mesmo
valor seria regra morta. */
.vkintegradora-footer-bottom .vkintegradora-footer-container {
flex-direction: column;
text-align: center;
gap: 6px;
}
.vkintegradora-footer-dev { justify-content: center; }
}
/* ===== MODAL INTERESSE ===== */
.modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 10000;
align-items: center;
justify-content: center;
padding: 20px;
backdrop-filter: blur(2px);
}
.modal-overlay.aberto { display: flex; }
.modal-box {
background: var(--white);
border-radius: var(--radius-lg);
padding: 36px 32px;
width: 100%;
max-width: 480px;
position: relative;
max-height: 90vh;
overflow-y: auto;
box-shadow: var(--shadow-lg);
}
.modal-box h2 {
font-size: 22px;
font-weight: 800;
margin-bottom: 4px;
color: var(--ink-900);
letter-spacing: -0.01em;
}
.modal-veiculo-label {
font-size: 13px;
color: var(--ink-900);
font-weight: 600;
margin-bottom: 20px;
}
.modal-fechar {
position: absolute;
top: 14px;
right: 18px;
background: none;
border: none;
font-size: 26px;
color: var(--gray-500);
cursor: pointer;
line-height: 1;
transition: color var(--t-fast);
}
.modal-fechar:hover { color: var(--ink-900); }
.modal-field {
display: flex;
flex-direction: column;
gap: 5px;
margin-bottom: 14px;
}
.modal-field label {
font-size: 13px;
font-weight: 600;
color: var(--gray-700);
}
.modal-field input,
.modal-field textarea {
padding: 11px 15px;
border: 1.5px solid var(--line-strong);
border-radius: var(--radius-btn);
font-family: inherit;
font-size: 14px;
color: var(--gray-900);
background: var(--gray-50);
transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
resize: vertical;
outline: none;
}
.modal-field textarea { border-radius: var(--radius-lg); }
.modal-field input:focus,
.modal-field textarea:focus {
border-color: var(--brand-700);
box-shadow: var(--focus-ring);
background: var(--white);
}
.modal-erro {
color: var(--ink-900);
font-size: 13px;
margin-bottom: 10px;
min-height: 18px;
font-weight: 500;
}
.modal-sucesso {
text-align: center;
font-size: 16px;
color: #16A34A;
font-weight: 600;
padding: 20px 0;
}
/* ===== RESPONSIVO GERAL ===== */
@media (max-width: 900px) {
.detalhe-grid { grid-template-columns: 1fr; }
.sidebar-form { position: static; }
.info-veiculo { padding: 24px; }
.info-titulo-preco { flex-direction: column; gap: 10px; }
.info-veiculo h1 { font-size: 20px; }
.preco-detalhe { font-size: 26px; }
.specs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.section-header { flex-direction: row; align-items: center; gap: 10px; }
.section-header h2 { font-size: 25px; }
.cta-section { padding: 50px 20px; }
.cta-section h2 { font-size: 26px; }
}
@media (max-width: 480px) {
.specs-grid { grid-template-columns: 1fr 1fr; }
.lista-opcionais { grid-template-columns: 1fr; }
}
/* =============== Lightbox =============== */
.lightbox-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.92);
z-index: 20000;
align-items: center;
justify-content: center;
}
.lightbox-overlay.ativo { display: flex; }
.lightbox-overlay img {
max-width: 90vw;
max-height: 85vh;
object-fit: contain;
border-radius: 8px;
user-select: none;
}
.lightbox-close {
position: absolute;
top: 18px;
right: 24px;
background: none;
border: none;
color: #fff;
font-size: 36px;
cursor: pointer;
line-height: 1;
z-index: 20001;
opacity: 0.8;
transition: opacity 0.2s;
}
.lightbox-close:hover { opacity: 1; }
.lightbox-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255,255,255,0.15);
border: none;
color: #fff;
width: 48px;
height: 48px;
border-radius: 50%;
font-size: 28px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
z-index: 20001;
}
.lightbox-arrow:hover { background: rgba(255,255,255,0.3); }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
.lightbox-counter {
position: absolute;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.7);
font-size: 14px;
font-weight: 600;
}
.galeria-midia-link {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 0;
font-size: 13px;
font-weight: 600;
color: var(--ink-900);
cursor: pointer;
transition: color 0.2s;
max-width: 1280px;
margin: 0 auto;
}
.galeria-midia-link:hover { color: var(--brand-800); }
.galeria-midia-link svg { width: 16px; height: 16px; }
/* =============== Banner de cookies (LGPD) =============== */
.cookie-banner {
position: fixed;
left: 16px;
right: 16px;
bottom: 16px;
z-index: 9500; /* acima do botão flutuante do WhatsApp (z-index 9000) */
/* Off-white, como o cabeçalho. Ele aparece por cima do rodapé preto na
maior parte da rolagem, então o claro é o que o separa do fundo — em
preto ele virava mais uma faixa escura colada no rodapé. */
background: var(--gray-50);
color: var(--ink-900);
border: 1px solid var(--line-strong);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: 18px 26px;
/* Largo o bastante para o texto do aviso caber em 2 linhas no desktop */
max-width: 1040px;
margin: 0 auto;
animation: cookie-slide-up 0.35s ease-out;
}
@keyframes cookie-slide-up {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.cookie-banner-inner {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.cookie-banner-text {
flex: 1 1 320px;
margin: 0;
font-size: 14px;
line-height: 1.5;
color: var(--ink-700);
}
.cookie-banner-text a {
color: var(--brand-700);
text-decoration: underline;
font-weight: 600;
}
.cookie-banner-text a:hover { color: var(--brand-900); }
.cookie-banner-actions {
display: flex;
gap: 10px;
flex-shrink: 0;
}
.cookie-btn {
border: none;
padding: 11px 24px;
font-size: 14px;
font-weight: 600;
letter-spacing: -0.008em;
border-radius: var(--radius-btn);
cursor: pointer;
transition: filter var(--t-fast), background-color var(--t-base),
border-color var(--t-base), color var(--t-base),
transform 0.16s var(--ease-btn), box-shadow 0.22s var(--ease-btn);
font-family: inherit;
}
.cookie-btn-primary {
background: var(--brand-700);
color: var(--on-brand);
border: 1px solid transparent;
box-shadow: var(--btn-molde), var(--btn-shadow);
}
.cookie-btn-primary:hover {
filter: brightness(0.86);
transform: translateY(-1px);
box-shadow: var(--btn-molde), var(--btn-shadow-hover);
}
.cookie-btn-primary:active {
transform: translateY(0);
filter: brightness(0.78);
box-shadow: var(--btn-molde), var(--btn-shadow-active);
transition-duration: 0.06s;
}
.cookie-btn-ghost {
background: transparent;
color: var(--ink-900);
border: 1px solid var(--gray-300);
}
.cookie-btn-ghost:hover {
background: var(--ink-50);
border-color: var(--ink-900);
box-shadow: var(--shadow-sm);
}
.cookie-btn-ghost:active { background: var(--ink-100); box-shadow: none; }
@media (max-width: 600px) {
.cookie-banner { padding: 16px; }
.cookie-banner-actions { width: 100%; }
.cookie-btn { flex: 1; }
}