/**
 * single-veiculo.css — single-veiculo.php, portado de
 * .specs/mockups/mockup-single-veiculo-v13.html. Root vars, fontes,
 * reset, header, footer e .switch já estão em main.css.
 */

.mono {
	font-family: 'IBM Plex Mono', monospace;
}

/* 2026-09-08: banner de prévia (anúncio ainda não publicado, só dono/equipe
   consegue ver — single-veiculo.php). */
.feirao-previa-banner {
	background: #FFF3CD;
	color: var(--amarelo);
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	padding: 10px 16px;
}

.galeria-wrap {
	width: 100%;
	margin: 0;
	padding: 0;
	position: relative;
}
.triptico {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	/* justify-content:center é inofensivo com as 3 colunas normais (1fr
	   preenche 100%, não sobra espaço livre pra centralizar) — só entra
	   em ação nos casos de 1-2 fotos abaixo, onde as colunas passam a ter
	   largura FIXA (não mais 1fr) e sobra espaço nas laterais. */
	justify-content: center;
	gap: 2px;
	overflow: hidden;
	position: relative;
}
.triptico img {
	width: 100%;
	aspect-ratio: 4/3;
	object-fit: cover;
	cursor: zoom-in;
	display: block;
	background: #ddd;
}
/* Menos de 3 fotos (1, 2, ou o fallback "sem foto") — 2026-09-11, pedido
   do Duvanir. Primeira tentativa esticava a(s) foto(s) pra preencher a
   largura toda (1 foto = 100%, 2 fotos = 50/50) — ele achou ruim, quer o
   mesmo tamanho de sempre (1/3 da largura, igual uma foto no layout de 3),
   só que centralizado, com espaço vazio dos dois lados em vez de só um.
   Por isso as colunas aqui usam largura FIXA — `calc((100% - 4px) / 3)`,
   a mesma largura que uma coluna `1fr` teria no layout de 3 (4px = os 2
   gaps de 2px que existiriam entre elas) — em vez de `1fr`, que
   estica pra preencher o espaço disponível. `justify-content: center`
   (acima) centraliza o bloco resultante, menor que o container, com
   sobra igual nas duas laterais. Só a partir de 761px (ver @media
   abaixo) — no mobile já existe uma regra própria que sempre mostra 1
   coluna só, independente da contagem; combinar as duas aqui entraria em
   conflito de especificidade (`:has()` pesa mais que `.triptico`
   sozinho) e quebraria o mobile. */
@media (min-width: 761px) {
	.triptico:has(img:only-child) {
		grid-template-columns: calc((100% - 4px) / 3);
	}
	.triptico:has(img:nth-child(2):last-child) {
		grid-template-columns: repeat(2, calc((100% - 4px) / 3));
	}
}
@media (max-width: 760px) {
	.triptico {
		grid-template-columns: 1fr;
	}
	.triptico img:nth-child(2),
	.triptico img:nth-child(3) {
		display: none;
	}
	.triptico img {
		aspect-ratio: 1/1;
	}
}

/* 2026-09-18: a animação de entrada no swipe ("perfumaria" de
   2026-09-17, fade + leve deslocamento via animarEntrada()) foi
   REMOVIDA — suspeita de ser a causa real do "pulo" da stickbar no
   Chrome Android (transform+opacity disparado bem na hora de cada
   troca de foto), ver BACKLOG.md. O Duvanir já tinha dado permissão
   explícita pra pular essa animação se desse qualquer problema. */

.tri-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	/* Maior + mais opaco + sombra — 2026-09-11, achado do Duvanir: no
	   tamanho/opacidade antigos (38px, 55%) a seta quase sumia contra
	   fotos com fundo escuro/variado (ex. vão do motor). */
	background: rgba(18, 18, 20, 0.75);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
	border: none;
	color: #fff;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
}
.tri-nav:hover {
	background: rgba(18, 18, 20, 0.9);
}
.tri-nav.prev {
	left: 16px;
}
.tri-nav.next {
	right: 16px;
}
.tri-nav svg {
	width: 24px;
	height: 24px;
}
/* Bolinhas no lugar do contador numérico ("1-3 / 18") — 2026-09-11,
   pedido do Duvanir. Uma bolinha por foto (não por "janela" de 3) — pra
   uma galeria de 18 fotos isso ainda cabe tranquilo (bolinhas de 6px). */
.tri-dots {
	position: absolute;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 6px;
	padding: 6px 10px;
	background: rgba(18, 18, 20, 0.4);
	border-radius: 20px;
	z-index: 3;
	max-width: calc(100% - 32px);
	overflow-x: auto;
	scrollbar-width: none;
}
.tri-dots::-webkit-scrollbar {
	display: none;
}
.tri-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	border: none;
	padding: 0;
	flex-shrink: 0;
	cursor: pointer;
}
.tri-dot.ativa {
	background: #fff;
	width: 8px;
	height: 8px;
}

.barra-topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin: -22px -24px 20px;
	padding: 11px 24px;
	border-radius: 6px 6px 0 0;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
}
.barra-topo span {
	display: flex;
	align-items: center;
	gap: 7px;
}
.barra-topo svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}
.barra-topo a {
	color: #fff;
	text-decoration: underline;
	font-weight: 500;
	font-size: 12.5px;
	white-space: nowrap;
}
.barra-topo.oferta {
	background: var(--vermelho);
}
.barra-topo.vistoriado {
	background: var(--verde);
}

/* Breadcrumb (2026-09-14, junto da URL hierárquica nova) — mesmo padrão
   visual de .breadcrumb em busca.css (archive-veiculo.php), mas essa
   classe só existe lá; single-veiculo.php não carrega busca.css, então
   precisa da própria cópia aqui. Mesmo max-width/padding de .wrap logo
   abaixo pra alinhar com o resto do conteúdo da página (senão renderiza
   full-bleed, sem a margem lateral que o resto da página tem). */
.breadcrumb {
	max-width: 1440px;
	margin: 0 auto;
	padding: 16px 24px 0;
	font-size: 13px;
	color: var(--grafite-claro);
}
.breadcrumb a {
	color: var(--grafite-claro);
	text-decoration: none;
}
.breadcrumb span {
	margin: 0 6px;
}

.wrap {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 24px 48px;
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 20px;
}
@media (max-width: 860px) {
	.wrap {
		grid-template-columns: 1fr;
	}
}

.card-flutuante {
	/* Nome da classe é legado do desenho anterior (sobrepunha o hero,
	   estilo Webmotors) — 2026-09-11, pedido do Duvanir: descolar pra
	   evitar semelhança visual direta com a Webmotors. margin-top
	   positivo (não mais negativo) — não renomeado pra não caçar outras
	   regras que dependem do seletor (.card-flutuante .barra-topo etc.). */
	background: var(--card);
	border-radius: 6px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
	margin-top: 20px;
	position: relative;
	z-index: 4;
	padding: 22px 24px;
}

.card-aviso-responsabilidade {
	background: var(--fundo);
	border: 1px solid var(--linha);
	border-radius: 6px;
	padding: 14px 16px;
	margin-top: 14px;
	font-size: 12px;
	color: var(--grafite-claro);
	line-height: 1.55;
}
.card-aviso-responsabilidade .aviso-icone {
	color: var(--grafite-claro);
	margin-bottom: 6px;
}
.card-aviso-responsabilidade p {
	margin: 0 0 6px;
}
.card-aviso-responsabilidade a {
	color: var(--vermelho);
	font-weight: 600;
	text-decoration: none;
}
.card-aviso-responsabilidade a:hover {
	text-decoration: underline;
}

.titulo-linha {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
}
.titulo-bloco h1 {
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 24px;
}
.titulo-bloco h1 b {
	color: var(--vermelho);
}
.titulo-bloco .subtitulo {
	color: var(--grafite-claro);
	font-size: 13px;
	margin-top: 4px;
	letter-spacing: 0.2px;
}
/* Preço duplicado só pra mobile (2026-09-15) — ver comentário em
   single-veiculo.php sobre o porquê. Escondido por padrão (desktop já
   mostra o preço de cara na .sidebar, lado a lado); reaproveita
   .preco/.fipe-comp/.selo-fipe (definidas mais abaixo, junto de
   .card-preco) sem duplicar a declaração — só herda o mesmo visual. */
.preco-mobile-topo {
	display: none;
}
@media (max-width: 860px) {
	/* display/margin ficam no bloco no FIM do arquivo (achatamento dos
	   cards) — junto de .card-flutuante/.card-simples/.vendedor-card, que
	   por sua vez precisam vir depois das próprias regras base pra vencer
	   a cascata (ver comentário lá). Só a fonte do preço fica aqui, sem
	   conflito de ordem nenhum (seletor composto já tem especificidade
	   maior que qualquer .preco sozinho, ganha em qualquer posição). */
	.preco-mobile-topo .preco {
		font-size: 34px;
	}
}
.favoritar,
.acao-icone {
	width: 34px;
	height: 34px;
	border: 1px solid var(--linha);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	background: #fff;
	color: var(--grafite);
}
.favoritar svg,
.acao-icone svg {
	width: 16px;
	height: 16px;
	/* flex-shrink:0 — 2026-09-11, achado real do Duvanir: os círculos
	   apareciam vazios, sem ícone nenhum dentro. Causa: .favoritar/
	   .acao-icone é item flex de .acoes-titulo (também flex) E container
	   flex do próprio svg — nesse flex aninhado, um <svg> sem atributo
	   width/height HTML (só viewBox) e sem flex-shrink:0 próprio colapsa
	   pra largura 0 mesmo com `width:16px` explícito no CSS (confirmado
	   isolando a causa: `width:16px` sozinho não bastava, só voltou a
	   funcionar depois de travar o encolhimento). As setas novas desta
	   sessão (.tri-nav etc.) não tinham esse problema por não estarem
	   dentro de outro flex por fora (position:absolute tira do fluxo). */
	flex-shrink: 0;
}
.favoritar.ativo svg {
	color: var(--vermelho);
	fill: var(--vermelho);
}

.acoes-titulo {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}
.compartilhar-wrap {
	position: relative;
}
.compartilhar-menu {
	display: none;
	position: absolute;
	top: 42px;
	right: 0;
	background: #fff;
	border: 1px solid var(--linha);
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	padding: 6px;
	min-width: 180px;
	z-index: 10;
}
.compartilhar-menu.aberto {
	display: block;
}
.compartilhar-menu a,
.compartilhar-menu button {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 9px 10px;
	border: none;
	background: none;
	text-align: left;
	font-size: 13.5px;
	color: #1A1A1C;
	text-decoration: none;
	border-radius: 4px;
	cursor: pointer;
	font-family: 'Inter', sans-serif;
}
.compartilhar-menu a:hover,
.compartilhar-menu button:hover {
	background: var(--fundo);
}
.compartilhar-menu svg {
	width: 17px;
	height: 17px;
	color: var(--grafite-claro);
	flex-shrink: 0;
}

.cidade {
	margin-top: 16px;
	font-size: 12px;
	color: var(--grafite-claro);
}
.cidade b {
	display: block;
	font-size: 14px;
	color: #1A1A1C;
	margin-top: 2px;
	font-weight: 500;
}

.specs-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px 12px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--linha);
}
@media (max-width: 520px) {
	.specs-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
.specs-grid div span {
	display: block;
	font-size: 11.5px;
	color: var(--grafite-claro);
}
.specs-grid div b {
	display: block;
	font-size: 13.5px;
	font-weight: 500;
	margin-top: 2px;
	font-family: 'IBM Plex Mono', monospace;
}

.card-preco {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.preco {
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
	font-size: 46px;
	letter-spacing: -0.5px;
	color: var(--preto);
	line-height: 1;
}
/* "Sob Consulta" (2026-09-17) — texto é bem mais longo que um valor
   numérico ("R$ 72.000"), 46px/34px (desktop/mobile) fica grande demais
   e quebra em 2 linhas fácil. Reduzido só pra este caso, mesma família/
   peso pra continuar parecendo preço (é a mesma hierarquia visual, só
   sem o número). */
.preco-sob-consulta {
	font-size: 26px;
	letter-spacing: 0;
}
.fipe-comp {
	margin-top: 10px;
	font-size: 12.5px;
	color: var(--grafite-claro);
}
.fipe-comp b {
	color: #333;
	font-family: 'IBM Plex Mono', monospace;
}
.selo-fipe {
	background: var(--verde-tinta);
	color: var(--verde);
	font-size: 11.5px;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 2px;
	font-family: 'IBM Plex Mono', monospace;
	margin-left: 6px;
}

.form-contato {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--linha);
}
.form-contato p {
	font-size: 13px;
	color: var(--grafite);
	margin-bottom: 12px;
}
.form-contato input,
.form-contato textarea {
	width: 100%;
	border: 1px solid var(--linha);
	border-radius: 3px;
	padding: 10px 11px;
	font-size: 13.5px;
	margin-bottom: 10px;
	font-family: 'Inter', sans-serif;
	resize: none;
}
.form-contato input:focus,
.form-contato textarea:focus {
	outline: none;
	border-color: var(--vermelho);
}
.erro-campo {
	color: var(--vermelho-escuro);
	font-size: 12px;
	margin: -7px 0 8px;
	display: none;
}
.consentimento {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 12px;
	color: var(--grafite-claro);
	margin: 6px 0 14px;
}
.consentimento input {
	width: auto;
	margin: 2px 0 0;
}

/* Botões de envio do formulário integrado (2026-09-25, item 1.27) —
   .botoes-contato-form é sempre flex; com 1 botão só (sem .com-telegram),
   `flex: 1` no filho único ocupa 100% da largura, mesmo efeito visual de
   antes do Telegram existir (não precisa de CSS condicional nenhum). */
.botoes-contato-form {
	display: flex;
	gap: 8px;
}
.cta-whats,
.cta-telegram {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: none;
	padding: 13px;
	border-radius: 3px;
	font-weight: 600;
	font-size: 14.5px;
	cursor: pointer;
	transition: background 0.15s;
}
.cta-whats {
	background: var(--preto);
	color: #fff;
}
.cta-whats:hover {
	background: var(--vermelho-escuro);
}
.cta-telegram {
	background: #229ED9;
	color: #fff;
}
.cta-telegram:hover {
	background: #1b7fa8;
}
.cta-whats svg,
.cta-telegram svg {
	width: 18px;
	height: 18px;
}
.confirmacao {
	display: none;
	background: var(--verde-tinta);
	color: var(--verde);
	font-size: 13px;
	padding: 10px 12px;
	border-radius: 3px;
	margin-top: 10px;
}

/* Botão "Agendar vídeo chamada" (2026-09-17) — secundário/outline, fica
   logo abaixo do CTA preto do WhatsApp, mesma largura/altura, só sem
   competir visualmente com a ação principal (preenchida). */
.cta-video {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: #fff;
	color: var(--preto);
	border: 1px solid var(--linha);
	width: 100%;
	padding: 12px;
	border-radius: 3px;
	font-weight: 600;
	font-size: 14.5px;
	cursor: pointer;
	margin-top: 10px;
	transition: border-color 0.15s;
}
.cta-video:hover {
	border-color: var(--preto);
}
.cta-video svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

/* Modal "Agendar vídeo chamada" (2026-09-17) — mesmo padrão visual do
   .modal-contato-whats (main.css, prefixo .mcw-), reimplementado aqui com
   prefixo .mav- porque este modal só existe no single-veículo
   (template-parts/modal-agendamento-video.php, incluído condicionalmente
   por single-veiculo.php, não sitewide via footer.php). */
.modal-agendamento-video {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(18, 18, 20, 0.6);
	z-index: 200;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.modal-agendamento-video.aberto {
	display: flex;
}
.mav-card {
	position: relative;
	background: var(--card);
	border-radius: 8px;
	padding: 28px 24px 24px;
	width: 100%;
	max-width: 400px;
	max-height: 90vh;
	overflow-y: auto;
}
.mav-card h2 {
	font-family: 'Oswald', sans-serif;
	font-size: 19px;
	margin: 0 0 4px;
	color: var(--preto);
}
.mav-desc {
	font-size: 12.5px;
	color: var(--grafite-claro);
	margin: 0 0 16px;
}
.mav-fechar {
	position: absolute;
	top: 14px;
	right: 14px;
	background: none;
	border: none;
	color: var(--grafite);
	cursor: pointer;
	padding: 4px;
}
.mav-fechar svg {
	width: 22px;
	height: 22px;
}
.mav-card .campo {
	margin-bottom: 12px;
}
.mav-card label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--grafite);
	margin-bottom: 6px;
}
.mav-card input,
.mav-card textarea {
	width: 100%;
	border: 1px solid var(--linha);
	border-radius: 4px;
	padding: 11px 12px;
	font-size: 16px;
	font-family: 'Inter', sans-serif;
	box-sizing: border-box;
}
.mav-card .erro-campo {
	display: none;
	color: var(--vermelho-escuro);
	font-size: 12px;
	margin: -8px 0 10px;
}
.mav-enviar {
	width: 100%;
	background: var(--preto);
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: 13px;
	font-size: 14.5px;
	font-weight: 600;
	font-family: 'Inter', sans-serif;
	cursor: pointer;
	margin-top: 6px;
}
.mav-enviar:hover {
	background: var(--vermelho-escuro);
}
.mav-erro-geral {
	display: none;
	color: var(--vermelho-escuro);
	font-size: 12.5px;
	margin-top: 10px;
}

.conteudo-inferior {
	margin-top: 20px;
}
section.bloco {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--linha);
}
section.bloco h2 {
	font-family: 'Oswald', sans-serif;
	font-size: 17px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 14px;
	color: var(--preto);
}
.descricao {
	font-size: 14.5px;
	color: #333;
	line-height: 1.75;
}

.descricao-bloco {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--linha);
}

.vistoria-cabecalho {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}
.data-vistoria-cinza {
	font-size: 12.5px;
	color: var(--grafite-claro);
}
.ver-laudo {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--linha);
	font-size: 13px;
	color: var(--vermelho-escuro);
	text-decoration: none;
	font-weight: 500;
}
.ver-laudo svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.video-card {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--card);
	border: 1px solid var(--linha);
	border-radius: 4px;
	padding: 14px;
	text-decoration: none;
	color: #1A1A1C;
}
.video-thumb {
	position: relative;
	width: 120px;
	height: 80px;
	border-radius: 3px;
	overflow: hidden;
	flex-shrink: 0;
	background: #000;
}
.video-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.75;
}
.video-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.video-play svg {
	width: 30px;
	height: 30px;
	color: #fff;
}
.video-info b {
	font-size: 14px;
}
.video-info span {
	display: block;
	font-size: 12.5px;
	color: var(--grafite-claro);
	margin-top: 3px;
}

table.itens-vistoria,
table.specs-full {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
}
table.itens-vistoria td,
table.specs-full td {
	padding: 8px 4px;
	border-bottom: 1px solid var(--linha);
}
/* 2026-09-17, pedido do Duvanir: a última linha tinha border-bottom
   (herdado da regra de cima, sem exceção pro :last-child) colado no
   border-top que .ver-laudo já tem logo abaixo — 2 linhas praticamente
   coladas, sem nada de conteúdo entre elas. Tira só da ÚLTIMA linha
   (.ver-laudo, quando existe, já é o divisor "de verdade" ali). */
table.itens-vistoria tr:last-child td {
	border-bottom: none;
}
table.itens-vistoria td:last-child {
	text-align: right;
	font-family: 'IBM Plex Mono', monospace;
	color: var(--verde);
	font-weight: 600;
}
table.specs-full td:first-child {
	color: var(--grafite-claro);
	width: 45%;
}
table.specs-full td:last-child {
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 500;
	text-align: right;
}

.similares-sub {
	font-size: 12.5px;
	color: var(--grafite-claro);
	margin: -8px 0 14px;
}
.similares {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}
@media (max-width: 860px) {
	.similares {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 520px) {
	.similares {
		grid-template-columns: 1fr;
	}
}
.card-similar {
	background: var(--card);
	border: 1px solid var(--linha);
	border-radius: 4px;
	overflow: hidden;
	text-decoration: none;
	color: #1A1A1C;
	display: block;
}
.card-similar img {
	width: 100%;
	aspect-ratio: 4/3;
	object-fit: cover;
	display: block;
	background: #ddd;
}
.card-similar .info {
	padding: 10px 12px;
}
.card-similar .modelo {
	font-size: 13.5px;
	font-weight: 500;
}
.card-similar .preco2 {
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	color: var(--vermelho);
	font-size: 15px;
	margin-top: 2px;
}
.card-similar .meta {
	font-size: 12px;
	color: var(--grafite-claro);
	font-family: 'IBM Plex Mono', monospace;
	margin-top: 4px;
}

.itens-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px 16px;
	font-size: 13.5px;
	color: #333;
}
/* Checkmark antes de cada item (2026-09-17, pedido do Duvanir) — cada
   item já É uma confirmação ("o carro tem isso"), o ícone reforça essa
   leitura sem precisar de texto extra. Verde (mesma cor de "OK" na
   tabela de vistoria/itens-vistoria) em vez de vermelho/preto — associa
   com "presente/confirmado", não com a marca. */
.itens-grid span {
	display: flex;
	align-items: center;
	gap: 7px;
}
.itens-grid svg {
	width: 15px;
	height: 15px;
	color: var(--verde);
	flex-shrink: 0;
}
@media (max-width: 640px) {
	.itens-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.vendedor-card {
	background: var(--card);
	border: 1px solid var(--linha);
	border-radius: 4px;
	padding: 20px 22px;
}
.vendedor-topo {
	display: flex;
	align-items: center;
	gap: 14px;
}
.vendedor-icone {
	width: 42px;
	height: 42px;
	border-radius: 4px;
	background: var(--fundo);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--grafite);
	flex-shrink: 0;
}
.vendedor-icone svg {
	width: 21px;
	height: 21px;
}
.vendedor-identidade {
	flex: 1;
	min-width: 0;
}
.vendedor-nome {
	font-weight: 600;
	font-size: 15px;
}
.vendedor-local {
	font-size: 12.5px;
	color: var(--grafite-claro);
	margin-top: 2px;
}
.vendedor-topo .vendedor-telefone {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	flex-shrink: 0;
}

.vendedor-rodape {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--linha);
	flex-wrap: wrap;
	gap: 14px;
}
.vendedor-links {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
}
.stats-vendedor {
	display: flex;
	align-items: center;
	gap: 18px;
}
.stats-vendedor div {
	text-align: left;
}
.stats-vendedor b {
	display: block;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 15px;
	font-weight: 600;
}
.stats-vendedor span {
	display: block;
	font-size: 11.5px;
	color: var(--grafite-claro);
	margin-top: 1px;
}
.stats-divisor {
	width: 1px;
	height: 28px;
	background: var(--linha);
	flex-shrink: 0;
}
.link-estoque {
	font-size: 13px;
	color: var(--vermelho-escuro);
	text-decoration: none;
	font-weight: 500;
	white-space: nowrap;
}

.denunciar {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	color: var(--grafite-claro);
	text-decoration: none;
	margin-top: 14px;
}
.denunciar svg {
	width: 14px;
	height: 14px;
}
.denunciar {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}
.denunciar-painel {
	margin-top: 10px;
	padding: 14px;
	background: var(--fundo);
	border: 1px solid var(--linha);
	border-radius: 6px;
	max-width: 320px;
}
.denunciar-painel .campo {
	margin-bottom: 10px;
}
.denunciar-painel .campo label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--grafite);
	margin-bottom: 4px;
}
.denunciar-painel .campo select,
.denunciar-painel .campo input {
	width: 100%;
	border: 1px solid var(--linha);
	border-radius: 4px;
	padding: 8px 10px;
	font-size: 13px;
	font-family: 'Inter', sans-serif;
}
.denunciar-painel .btn-avancar {
	background: var(--preto);
	border: none;
	color: #fff;
	padding: 9px 16px;
	border-radius: 4px;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
}
.denunciar-painel .btn-avancar:disabled {
	opacity: 0.5;
	cursor: default;
}
.denunciar-resultado {
	margin-top: 8px;
	font-size: 12.5px;
}
.denunciar-resultado.sucesso {
	color: var(--verde);
}
.denunciar-resultado.erro {
	color: var(--vermelho);
}

.sidebar {
	position: sticky;
	top: 16px;
	align-self: start;
}

.lightbox {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(30, 30, 34, 0.72);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	z-index: 50;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.lightbox.aberto {
	display: flex;
}
.lightbox-fechar {
	position: absolute;
	top: 20px;
	right: 24px;
	background: none;
	border: none;
	color: #fff;
	cursor: pointer;
}
.lightbox-fechar svg {
	width: 28px;
	height: 28px;
}
.lightbox-img-wrap {
	position: relative;
	max-width: 1000px;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 14px;
}
.lightbox-img {
	width: 100%;
	max-height: 60vh;
	object-fit: contain;
	border-radius: 3px;
}
/* Faixa de scroll nativo do lightbox pro mobile (2026-09-18) —
   template-parts do single-veiculo.php, elemento SEPARADO de
   .lightbox-img-wrap de propósito (ver comentário lá no PHP e em
   single-veiculo.js). Escondida por padrão (desktop usa só
   .lightbox-img-wrap/#lbImg) — a troca de qual aparece é só CSS, por
   breakpoint (ver @media (max-width:860px) no fim do arquivo). */
.lightbox-tira-mobile {
	display: none;
}
.lightbox-legenda {
	color: #d8d8da;
	font-size: 13.5px;
	margin-top: 12px;
	min-height: 20px;
	text-align: center;
	max-width: 700px;
}
/* Faixa de miniaturas com setas em vez de scrollbar nativa — 2026-09-11,
   pedido do Duvanir ("está feio"). Reaproveita o visual de .tri-nav (setas
   do hero), só menor (32px, cabe melhor ao lado de miniaturas de 54px de
   altura) — ver .lightbox-minis-nav abaixo. */
.lightbox-minis-wrap {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	max-width: 1000px;
	width: 100%;
}
.lightbox-minis {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
}
.lightbox-minis::-webkit-scrollbar {
	display: none;
}
.lightbox-minis-nav {
	position: static;
	transform: none;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
}
.lightbox-minis-nav svg {
	width: 16px;
	height: 16px;
}
.lightbox-minis img {
	width: 72px;
	height: 54px;
	object-fit: cover;
	border-radius: 3px;
	opacity: 0.5;
	cursor: pointer;
	flex-shrink: 0;
	border: 2px solid transparent;
}
.lightbox-minis img.ativa {
	opacity: 1;
	border-color: var(--vermelho);
}
.lb-nav {
	background: rgba(255, 255, 255, 0.1);
	border: none;
	color: #fff;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	cursor: pointer;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.lb-nav svg {
	width: 20px;
	height: 20px;
}

.video-modal-player {
	width: 100%;
	max-width: 900px;
	aspect-ratio: 16/9;
	background: #000;
	border-radius: 4px;
	overflow: hidden;
}
.video-modal-player iframe {
	width: 100%;
	height: 100%;
	border: none;
}
.video-modal-legenda {
	color: #e4e4e6;
	font-size: 13.5px;
	margin-top: 14px;
}
.video-modal-fallback {
	color: #fff;
	font-size: 12.5px;
	text-decoration: underline;
	margin-top: 8px;
	opacity: 0.85;
}

.card-simples {
	background: var(--card);
	border: 1px solid var(--linha);
	border-radius: 6px;
	padding: 20px 24px;
	margin-top: 16px;
}
.titulo-card-simples {
	font-family: 'Oswald', sans-serif;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 14px;
	color: var(--preto);
}

.compare-precos {
	background: var(--preto);
	border-radius: 6px;
	padding: 22px 24px;
	position: relative;
	display: flex;
	gap: 40px;
	flex-wrap: wrap;
}
.compare-item span {
	display: block;
	font-size: 12px;
	color: #9a9a9e;
}
.compare-item b {
	display: block;
	font-family: 'Oswald', sans-serif;
	font-size: 22px;
	color: #fff;
	margin-top: 4px;
}
.compare-selo {
	margin-left: auto;
	align-self: center;
	background: var(--vermelho);
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 3px;
	white-space: nowrap;
}

.horario-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: none;
	border: none;
	border-top: 1px solid var(--linha);
	border-bottom: 1px solid var(--linha);
	padding: 12px 2px;
	margin-top: 14px;
	cursor: pointer;
	font-size: 13px;
	font-family: 'Inter', sans-serif;
	color: #333;
}
.horario-toggle span {
	display: flex;
	align-items: center;
	gap: 7px;
}
.horario-toggle svg {
	width: 16px;
	height: 16px;
	color: var(--grafite-claro);
	transition: transform 0.2s;
}
.horario-toggle.aberto svg {
	transform: rotate(180deg);
}
.horario-corpo {
	display: none;
	font-size: 13px;
	color: var(--grafite);
	padding: 10px 2px;
	white-space: pre-line;
}
.horario-corpo.aberto {
	display: block;
}
.horario-semana div {
	display: flex;
	justify-content: space-between;
	padding: 9px 2px;
	border-bottom: 1px solid var(--linha);
	color: var(--grafite);
}
.horario-semana b {
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 500;
	color: #333;
}
.horario-obs {
	margin: 8px 2px 0;
	font-size: 12.5px;
	color: var(--grafite-claro);
}
.ponto-status {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}
.ponto-aberto {
	background: var(--verde);
}
.ponto-fechado {
	background: var(--grafite-claro);
}

.full-width {
	max-width: 1440px;
	margin: 36px auto 0;
	padding: 0 24px;
}
.titulo-full {
	font-family: 'Oswald', sans-serif;
	font-size: 19px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--preto);
}

.categorias-secao {
	width: 100%;
	padding: 32px 40px 40px;
	margin-top: 8px;
}
.categorias-secao .titulo-full {
	margin-bottom: 14px;
}
.categorias-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}
@media (max-width: 760px) {
	.categorias-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.categorias-secao {
		padding: 24px 20px 32px;
	}
}
.categoria-tile {
	display: flex;
	align-items: flex-end;
	height: 130px;
	border-radius: 4px;
	background: var(--preto-2);
	padding: 14px;
	color: #fff;
	font-family: 'Oswald', sans-serif;
	font-size: 16px;
	text-decoration: none;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* ===== Stickbar de contato (Ligar/WhatsApp) — só mobile, 2026-09-15 =====
   Escondida por padrão (desktop já tem WhatsApp/telefone acessíveis na
   sidebar, sticky, sem precisar rolar) — mesmo breakpoint de
   .preco-mobile-topo (860px, onde .wrap empilha a sidebar pro fim da
   página) e do mesmo racional: é exatamente aí que "Ligar"/"WhatsApp"
   passam a exigir rolar a página inteira pra achar. */
.stickbar-contato {
	display: none;
}
@media (max-width: 860px) {
	.stickbar-contato {
		display: flex;
		gap: 10px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 45;
		/* 2026-09-18: depois de várias tentativas de calcular manualmente
		   o respiro pra área de gestos do S21 (env(safe-area-inset-bottom)
		   + viewport-fit=cover, depois medição dinâmica via JS, depois
		   valor fixo — nenhuma ficou visualmente equilibrada de verdade,
		   ver BACKLOG.md pra a investigação completa) — revertido pro
		   padding simples e simétrico de sempre. `viewport-fit=cover`
		   também foi revertido (header.php): sem ele, o navegador volta a
		   RESERVAR o espaço de sistema sozinho (comportamento padrão),
		   então `position:fixed;bottom:0` já fica automaticamente acima
		   da área de gestos, sem precisar de cálculo manual nenhum.
		   Hipótese (a confirmar com o Duvanir): o bug original no S21 que
		   motivou toda essa investigação pode ter sido, na real, um
		   sintoma colateral do swipe por toque em JS que existia na
		   época (viewport de layout desalinhado do visual quando a
		   página virava "arrastável" além do previsto) — não um
		   problema de verdade com a área de gestos em si. Como o swipe
		   foi completamente reescrito pra scroll-snap nativo desde então
		   (zero JS decidindo/interceptando gesto), a causa raiz daquele
		   sintoma original pode já não existir mais.
		   Se voltar a cobrir a stickbar no S21, isso confirma que era um
		   problema real de área de gestos — nesse caso, o próximo passo
		   é usar só `env(safe-area-inset-bottom)` sozinho (sem
		   viewport-fit=cover, então sempre 0 nesse navegador) mais um
		   piso pequeno fixo, sem tentar ser preciso. */
		padding: 10px 16px 10px;
		/* Vidro fosco (2026-09-17, pedido do Duvanir: "uma transparência pra
		   dar um charme") — fundo branco translúcido + blur do que passa por
		   baixo ao rolar, em vez de branco sólido. backdrop-filter tem
		   suporte amplo (Safari sempre teve, Chrome/Firefox desde ~2021) —
		   sem suporte, degrada graciosamente pro rgba sozinho (ainda
		   translúcido, só sem o blur). Botões continuam com fundo sólido
		   (preto/branco) — o "charme" é só na barra, não pode comprometer a
		   legibilidade dos CTAs. */
		background: rgba(255, 255, 255, 0.82);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		border-top: 1px solid var(--linha);
		box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
	}
	/* 2026-09-18: o mascaramento (esconder a stickbar durante o swipe,
	   feirao-swipe-foto-ativo) foi REMOVIDO junto com a animação de
	   entrada da foto (ver comentário perto de .tri-nav) — teste pra
	   confirmar se a animação era a causa real do "pulo", em vez do
	   próprio Chrome Android como se suspeitava antes. Ver BACKLOG.md. */
	.stickbar-btn {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		height: 46px;
		border-radius: 4px;
		font-size: 14px;
		font-weight: 600;
		text-decoration: none;
		cursor: pointer;
	}
	.stickbar-btn svg {
		width: 18px;
		height: 18px;
		flex-shrink: 0;
	}
	.stickbar-ligar {
		background: #fff;
		border: 1px solid var(--linha);
		color: #333;
	}
	.stickbar-whats {
		background: var(--preto);
		border: 1px solid var(--preto);
		color: #fff;
	}
	.stickbar-whats:hover {
		background: var(--vermelho-escuro);
		border-color: var(--vermelho-escuro);
	}
	/* Reserva espaço no fim da página pra barra fixa não cobrir o último
	   conteúdo (rodapé) — só quando a stickbar de fato existe (PHP só
	   renderiza com WhatsApp ou telefone público disponível; sem os dois,
	   não tem barra e não precisa de espaço reservado nenhum). */
	body:has(.stickbar-contato) {
		padding-bottom: 74px;
	}
}

/* ===== Achatamento mobile dos cards (2026-09-16, pedido do Duvanir) =====
   Bloco reposicionado pro FIM do arquivo de propósito (achado ao vivo do
   Duvanir revisando: "Itens do Veículo" continuava com borda/canto
   arredondado apesar do fix). Causa: este media query originalmente vivia
   logo depois de .wrap (bem no topo do arquivo) — mas .card-simples e
   .vendedor-card têm suas regras BASE (sem media query, sempre aplicam)
   mais abaixo no arquivo. Em CSS, quando duas regras têm a MESMA
   especificidade, quem vem DEPOIS no arquivo vence, mesmo que a de cima
   esteja dentro de um @media e a de baixo não — @media não empresta
   prioridade nenhuma sozinho. A regra base (sem @media, "sempre vale")
   ficava depois da minha regra mobile no arquivo, então vencia até no
   mobile. Solução: manter este bloco DEPOIS de todas as regras base que
   ele precisa sobrescrever (.card-flutuante, .vendedor-card, .card-simples
   — as 3 já apareceram acima neste arquivo a essa altura). */
@media (max-width: 860px) {
	/* Padding lateral PRÓPRIO de cada card (.card-flutuante/.card-simples/
	   .vendedor-card, 22-24px) somava com o padding de página (.wrap,
	   24px) — ~96px comidos só de padding num aparelho de 375px, uns 25%
	   da largura útil. Achatado só no mobile: sem fundo/borda/sombra/raio,
	   sem padding lateral próprio (só o de .wrap sobra) — a separação
	   entre seções passa a ser só título + linha divisória (mesmo padrão
	   que .descricao-bloco/section.bloco já usavam). Desktop inteiramente
	   fora deste media query, sem nenhuma mudança.
	   "background: none" sozinho não bastava (achado do Duvanir revisando
	   ao vivo) — body.feirao-tema (main.css, sitewide) tem
	   background:var(--fundo), um cinza claro (#F5F4F2), não branco; sem
	   o fundo próprio do card (branco, var(--card)) esse cinza aparecia
	   por trás do texto inteiro, dando exatamente a impressão de "não
	   mudou nada". Corrigido virando o body branco também, só aqui (só
	   este arquivo carrega em single-veiculo.php, não vaza pra outras
	   páginas que usam body.feirao-tema). */
	body.feirao-tema {
		background: var(--card);
	}
	.card-flutuante,
	.card-simples,
	.vendedor-card {
		background: none;
		border: none;
		border-radius: 0;
		box-shadow: none;
		padding-left: 0;
		padding-right: 0;
	}

	/* .barra-topo bleedava até a borda arredondada do card via margin
	   negativo (-22px -24px, exatamente o padding lateral que o card
	   tinha). Coincidência útil: esse -24px é IDÊNTICO ao padding de
	   .wrap — com o card sem padding lateral próprio, o mesmo negativo
	   agora bleeda direto até a borda da tela (em vez de até a borda do
	   card), sem precisar recalcular nada. Só o raio de borda (pensado
	   pra encostar num card arredondado, não na borda reta da tela) fica
	   sem sentido aqui. */
	.barra-topo {
		border-radius: 0;
	}

	/* Divisor onde antes era a borda do card inteiro — .card-flutuante da
	   .col-principal é o 1º elemento da coluna (não precisa de divisor
	   acima); o da .sidebar vem depois de "Sobre o vendedor" quando o
	   grid empilha, esse sim precisa. .card-simples nunca fica dentro de
	   um section.bloco (que já teria seu próprio divisor) — sempre
	   precisa do próprio. .vendedor-card fica DENTRO de um section.bloco
	   que já tem border-top/padding-top — divisor duplicado, não repete
	   aqui. */
	.sidebar .card-flutuante,
	.card-simples {
		border-top: 1px solid var(--linha);
		padding-top: 20px;
	}

	/* .preco-mobile-topo (preço duplicado no topo, feature de 2026-09-15)
	   também tinha virado "card" (fundo cinza/borda/canto arredondado) —
	   achado do Duvanir no mesmo dia. Ênfase só tipográfica (34px, negrito,
	   já existia) — sem caixa, sem divisor próprio (.specs-grid, logo
	   abaixo, já tem border-top incondicional que serve de único divisor
	   necessário; um border-bottom aqui grudaria nele quando o veículo não
	   tem cidade cadastrada, virando 2 linhas seguidas). */
	.preco-mobile-topo {
		display: block;
		margin: 14px 0;
	}

	/* Setas da galeria (tríptico + lightbox) somem no mobile (2026-09-17,
	   pedido do Duvanir) — scroll nativo com scroll-snap (ver abaixo) já
	   cobre a navegação, e as setas sobrepostas na foto atrapalhavam mais
	   do que ajudavam num toque pequeno. Desktop mantém as duas (.tri-nav/
	   .lb-nav ficam fora deste media query lá), sem touch nem swipe,
	   precisa delas. As bolinhas de posição (.tri-dots) e a faixa de
	   miniaturas do lightbox continuam — ainda são o único jeito de PULAR
	   direto pra uma foto específica, o scroll-snap só anda 1 de cada
	   vez (a menos que o usuário arraste rápido o bastante pra passar
	   direto por cima de uma foto). */
	.tri-nav,
	.lb-nav {
		display: none;
	}

	/* Galeria mobile — scroll nativo com CSS scroll-snap (2026-09-18),
	   substitui a detecção de swipe por toque em JS (detectarSwipe(),
	   removida) depois de várias rodadas de atrito com o Chrome Android
	   competindo pelo controle do mesmo gesto (a barra do sistema
	   "pulava" durante o swipe — investigação completa no BACKLOG.md).
	   O navegador cuida de toda a física do toque (inércia, elástico)
	   sozinho — zero JS interceptando/decidindo o gesto, zero
	   touch-action especial (o padrão `auto` já permite exatamente o
	   scroll que queremos aqui).
	   .triptico é REAPROVEITADO (mesmo elemento do desktop, só populado
	   diferente por single-veiculo.js — todas as fotos de uma vez, não
	   só uma janela de 3) — sem risco de vazar pro desktop porque essas
	   regras só existem dentro deste media query. */
	.triptico {
		display: flex;
		overflow-x: auto;
		overflow-y: hidden;
		gap: 0;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		/* Achado do Duvanir testando em aparelho físico: as fotos ficavam
		   "meio a meio" ao soltar o dedo, sem encaixar direito — a regra
		   base .triptico (topo do arquivo) tem `justify-content: center`,
		   pensada só pro caso desktop de 1-2 fotos (centraliza o "bloco"
		   menor que 3 colunas). Nesse layout mobile (flex row com
		   conteúdo bem mais largo que o container, rolável), essa mesma
		   regra faz o navegador CENTRALIZAR a linha inteira dentro da
		   área visível — empurrando metade do conteúdo pra um scroll
		   NEGATIVO (inacessível/instável), o que desalinha os pontos de
		   encaixo do scroll-snap. `.lightbox-tira-mobile` nunca teve esse
		   problema por ser um elemento novo, sem essa regra legada.
		   flex-start neutraliza — cada foto ocupa exatamente sua fatia
		   normal, scrollLeft:0 mostra a 1ª foto de verdade. */
		justify-content: flex-start;
	}
	.triptico img,
	.triptico img:nth-child(2),
	.triptico img:nth-child(3) {
		display: block;
		flex: 0 0 100%;
		scroll-snap-align: center;
	}

	/* .lightbox-tira-mobile é um elemento SEPARADO de .lightbox-img-wrap
	   (ver comentário no PHP/JS) — só troca de CSS aqui: desktop usa
	   .lightbox-img-wrap/#lbImg (intocado), mobile usa esta faixa. */
	.lightbox-img-wrap {
		display: none;
	}
	.lightbox-tira-mobile {
		display: flex;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		width: 100%;
		max-width: 1000px;
	}
	.lightbox-tira-mobile img {
		flex: 0 0 100%;
		scroll-snap-align: center;
		max-height: 60vh;
		object-fit: contain;
		border-radius: 3px;
	}

	/* Formulário de contato inline (sidebar) some no mobile (2026-09-17,
	   pedido do Duvanir) — redundante com a stickbar fixa no rodapé
	   (.stickbar-contato, "Ligar"/"WhatsApp", já visível sem rolar). No
	   mobile, contato passa a ser só pela stickbar. Desktop mantém o
	   formulário normalmente — lá não tem stickbar nenhuma. */
	.form-contato {
		display: none;
	}

	/* 2026-09-18, pedido do Duvanir: o preço na sidebar (.card-preco)
	   também some no mobile — antes ficava de propósito como "reforço"
	   (mesmo valor já aparece em .preco-mobile-topo, logo abaixo do
	   título, sem precisar rolar), mas o Duvanir achou a duplicação
	   ruim ("aparece de novo lá embaixo no final da página"). Desktop
	   mantém — lá NÃO existe .preco-mobile-topo (só aparece a partir
	   deste mesmo breakpoint, ver regra própria acima), então o preço
	   da sidebar continua sendo a única exibição, nunca duplicado lá. */
	.card-preco {
		display: none;
	}
}