/* ══════════════════════════════════════════════════════════════════
   veiculos.css — Vitrine pública e página do anúncio (v2 — Classificados)
   Mesma linguagem do portal (fundo quente, cartões, cor por contexto);
   os selos .anuncio-selo-* vêm do style.css (fonte única com o painel).
   ══════════════════════════════════════════════════════════════════ */
:root {
    --vc-bg: #FAF7F2;
    --vc-card: #FFFFFF;
    --vc-ink: #221D2E;
    --vc-ink-2: #6E6680;
    --vc-linha: #EFEAE2;
    --vc-radius: 18px;
    --vc-sombra: 0 1px 2px rgba(34, 29, 46, .05), 0 6px 18px rgba(34, 29, 46, .06);
    --vc-sombra-hover: 0 2px 4px rgba(34, 29, 46, .07), 0 14px 34px rgba(34, 29, 46, .12);
    --vc-autos: #D97706;
    --vc-autos-bg: linear-gradient(135deg, #FEF3E2, #FBEAD0);
}

body.pagina-veiculos { background: var(--vc-bg); }
body.pagina-veiculos main { color: var(--vc-ink); }

.vc-wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.vc-wrap a { text-decoration: none; color: inherit; }

/* ── Cabeço da vitrine ── */
.vc-hero { padding: 1.8rem 0 .4rem; }
.vc-hero .vc-kicker {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
    color: #fff; background: var(--vc-autos); border-radius: 999px; padding: .25rem .7rem; margin-bottom: .6rem;
}
.vc-hero h1 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; letter-spacing: -.02em; margin: 0; }
.vc-hero p { color: var(--vc-ink-2); font-size: .92rem; margin: .25rem 0 0; }
.vc-busca { margin-top: 1rem; display: flex; gap: .5rem; max-width: 560px; flex-wrap: wrap; }
.vc-busca input, .vc-busca select {
    border: 1px solid var(--vc-linha); border-radius: 999px; padding: .5rem 1.1rem;
    font-size: .92rem; background: var(--vc-card); color: var(--vc-ink); flex: 1; min-width: 180px;
}
.vc-busca .vc-btn-buscar {
    border: none; border-radius: 999px; font-weight: 800; color: #fff;
    background: var(--achatudo-gradient, linear-gradient(135deg, #7C3AED, #F43F5E)); padding: .5rem 1.3rem; cursor: pointer;
}

/* ── Filtros ── */
.vc-filtros { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; padding: 1.1rem 0 .3rem; }
.vc-chip {
    border: 1.5px solid var(--vc-linha); background: var(--vc-card); border-radius: 999px;
    padding: .45rem .95rem; font-size: .86rem; font-weight: 700; color: var(--vc-ink);
    display: inline-flex; align-items: center; gap: .4rem; transition: all .15s;
}
.vc-chip i { color: var(--vc-autos); }
.vc-chip:hover { border-color: var(--vc-autos); color: var(--vc-ink); }
.vc-chip.ativo { background: var(--vc-ink); border-color: var(--vc-ink); color: #fff; }
.vc-chip.ativo i { color: #fff; }
.vc-filtros select {
    border: 1px solid var(--vc-linha); border-radius: 999px; font-size: .86rem; font-weight: 700;
    padding: .45rem 2rem .45rem .95rem; background: var(--vc-card); color: var(--vc-ink);
}
.vc-ordenar { margin-left: auto; display: flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 700; color: var(--vc-ink-2); }
@media (max-width: 700px) { .vc-ordenar { margin-left: 0; } }

/* ── Faixa "melhores negócios" ── */
.vc-strip { margin: 1.1rem 0 .4rem; border-radius: var(--vc-radius); padding: 1.1rem 1.25rem 1.25rem; box-shadow: var(--vc-sombra); background: var(--vc-autos-bg); }
.vc-strip .vc-cab { display: flex; align-items: center; gap: .6rem; margin-bottom: .85rem; flex-wrap: wrap; }
.vc-strip .vc-cab h2 { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.vc-strip .vc-cab .vc-exp { font-size: .78rem; color: var(--vc-ink-2); font-weight: 600; }
.vc-setas { margin-left: auto; display: flex; gap: .4rem; }
.vc-setas button {
    width: 32px; height: 32px; border-radius: 50%; border: none; background: #fff; box-shadow: var(--vc-sombra);
    cursor: pointer; font-size: 1rem; font-weight: 800; color: var(--vc-ink); line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.vc-strip-row { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 2px; }
.vc-strip-row::-webkit-scrollbar { display: none; }
.vc-strip-row .vc-anuncio { min-width: 230px; max-width: 230px; scroll-snap-align: start; }

/* ── Grade e card ── */
.vc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding: 1rem 0 1.4rem; }
@media (max-width: 1100px) { .vc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .vc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .vc-grid { grid-template-columns: minmax(0, 1fr); } }

.vc-anuncio {
    background: var(--vc-card); border-radius: 14px; overflow: hidden;
    box-shadow: 0 1px 3px rgba(34, 29, 46, .08); transition: transform .15s ease, box-shadow .15s ease; display: block;
}
.vc-anuncio:hover { transform: translateY(-3px); box-shadow: var(--vc-sombra-hover); }
.vc-foto { aspect-ratio: 16 / 10; background: var(--vc-autos-bg); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.vc-foto > i { font-size: 2.6rem; color: var(--vc-autos); opacity: .5; }
/* img absoluta: foto em retrato não estica a moldura (min-height do flex venceria o aspect-ratio) */
.vc-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vc-foto .anuncio-selo { position: absolute; top: .6rem; left: .6rem; background: #fff; box-shadow: var(--vc-sombra); }
.vc-fotos-n {
    position: absolute; bottom: .6rem; right: .6rem; font-size: .68rem; font-weight: 700; color: #fff;
    background: rgba(34, 29, 46, .55); border-radius: 999px; padding: .18rem .5rem; display: inline-flex; align-items: center; gap: .25rem;
}
.vc-destaque {
    position: absolute; top: .6rem; right: .6rem; font-size: .66rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .04em; color: #fff; background: var(--achatudo-alerta, #F59E0B); border-radius: 999px;
    padding: .2rem .55rem; display: inline-flex; align-items: center; gap: .25rem; box-shadow: var(--vc-sombra);
}

/* ── Imóveis (v3) — finalidade, "/mês" e faixa co-branded ── */
.vc-finalidade { background: #fff; box-shadow: var(--vc-sombra); }
.vc-finalidade-venda { color: #0E9F6E; }
.vc-finalidade-locacao { color: var(--achatudo-info, #3B82F6); }
.vc-finalidade-lancamento { color: var(--achatudo-roxo, #7C3AED); }
.vc-mes { font-size: .7em; font-weight: 700; color: var(--vc-ink-2); }

.vc-powered {
    display: flex; align-items: center; gap: .6rem; margin-top: .9rem;
    background: var(--vc-card); border: 1px solid var(--vc-linha); border-radius: 999px;
    padding: .4rem .9rem; width: fit-content; font-size: .78rem; font-weight: 700; color: var(--vc-ink-2);
}
.vc-powered img { height: 22px; width: auto; display: block; }
.vc-info { padding: .75rem .9rem .9rem; }
.vc-info h3 { font-size: .92rem; font-weight: 800; line-height: 1.25; margin: 0; letter-spacing: -.01em; color: var(--vc-ink); }
.vc-meta { font-size: .75rem; color: var(--vc-ink-2); margin-top: .2rem; }
.vc-preco { font-size: 1.08rem; font-weight: 800; color: var(--achatudo-roxo, #7C3AED); margin-top: .4rem; }
.vc-loja { font-size: .72rem; font-weight: 700; color: #0E9F6E; margin-top: .25rem; display: inline-flex; align-items: center; gap: .25rem; }

/* ── Vazio / CTA anuncie ── */
.vc-vazio { background: var(--vc-card); border-radius: var(--vc-radius); box-shadow: var(--vc-sombra); padding: 3rem 1.5rem; text-align: center; margin: 1rem 0; }
.vc-vazio i { font-size: 3rem; color: var(--vc-linha); }
.vc-vazio p { color: var(--vc-ink-2); margin: .6rem 0 0; }
.vc-cta-anuncie {
    margin: 1rem 0 2rem; border-radius: var(--vc-radius); box-shadow: var(--vc-sombra); overflow: hidden;
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%); color: #fff;
    display: flex; align-items: center; gap: 1.2rem; padding: 1.15rem 1.4rem; flex-wrap: wrap;
}
.vc-cta-anuncie h2 { font-size: 1.15rem; font-weight: 800; margin: 0; }
.vc-cta-anuncie p { font-size: .85rem; color: #C4B5FD; margin: .15rem 0 0; }
.vc-cta-anuncie .vc-btn-cta { margin-left: auto; border: none; border-radius: 999px; font-weight: 800; font-size: .88rem; background: #fff; color: #4c1d95; padding: .55rem 1.2rem; }
@media (max-width: 700px) { .vc-cta-anuncie .vc-btn-cta { margin-left: 0; } }

/* ── Paginação ── */
.vc-pag { display: flex; justify-content: center; gap: .4rem; padding: 0 0 2rem; }
.vc-pag a, .vc-pag span {
    min-width: 38px; height: 38px; padding: 0 .5rem; border-radius: 12px; background: var(--vc-card); box-shadow: var(--vc-sombra);
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .88rem; color: var(--vc-ink-2);
}
.vc-pag a:hover { box-shadow: var(--vc-sombra-hover); color: var(--vc-ink); }
.vc-pag .ativo { background: var(--vc-ink); color: #fff; }

/* ══ Página do anúncio ══ */
.vc-voltar {
    display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 700; color: var(--vc-ink-2);
    background: var(--vc-card); box-shadow: var(--vc-sombra); padding: .4rem .9rem; border-radius: 999px; margin: 1.2rem 0 1rem;
}
.vc-voltar:hover { box-shadow: var(--vc-sombra-hover); color: var(--vc-ink); }

.vc-detalhe { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 24px; align-items: start; padding-bottom: 1rem; }
/* minmax(0,1fr): sem isso, o min-content dos filhos (fileira de miniaturas) explode a coluna no mobile */
@media (max-width: 991px) { .vc-detalhe { grid-template-columns: minmax(0, 1fr); } }

.vc-galeria { background: var(--vc-card); border-radius: var(--vc-radius); box-shadow: var(--vc-sombra); overflow: hidden; }
.vc-foto-principal { aspect-ratio: 16 / 9; background: var(--vc-autos-bg); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.vc-foto-principal > i { font-size: 4.5rem; color: var(--vc-autos); opacity: .5; }
.vc-foto-principal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vc-foto-principal .anuncio-selo { position: absolute; top: .9rem; left: .9rem; background: #fff; box-shadow: var(--vc-sombra); font-size: .78rem; }
.vc-thumbs { display: flex; gap: .5rem; padding: .6rem; overflow-x: auto; }
.vc-thumb {
    flex: 0 0 96px; aspect-ratio: 16 / 10; border-radius: 10px; border: 2px solid transparent; cursor: pointer;
    overflow: hidden; background: var(--vc-autos-bg); display: flex; align-items: center; justify-content: center;
    position: relative;
}
.vc-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vc-thumb.ativo { border-color: var(--achatudo-roxo, #7C3AED); }

.vc-cab-anuncio { padding: 1.3rem 0 .4rem; }
.vc-cab-anuncio h1 { font-size: clamp(1.4rem, 2.8vw, 1.9rem); font-weight: 800; letter-spacing: -.02em; margin: 0; }
.vc-cab-anuncio .vc-sub { font-size: .9rem; color: var(--vc-ink-2); margin-top: .3rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.vc-cab-anuncio .vc-sub i { color: var(--achatudo-roxo, #7C3AED); }

.vc-bloco { background: var(--vc-card); border-radius: var(--vc-radius); box-shadow: var(--vc-sombra); padding: 1.25rem 1.4rem; margin-top: 1.1rem; }
.vc-bloco h2 { font-size: 1rem; font-weight: 800; letter-spacing: -.01em; margin: 0 0 .9rem; display: flex; align-items: center; gap: .45rem; }
.vc-bloco h2 i { color: var(--vc-autos); }

.vc-ficha { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; }
@media (max-width: 700px) { .vc-ficha { grid-template-columns: repeat(2, 1fr); } }
.vc-ficha .item { background: #FBF9F5; border-radius: 12px; padding: .7rem .85rem; }
.vc-ficha .rotulo { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--vc-ink-2); }
.vc-ficha .valor { font-size: .92rem; font-weight: 700; margin-top: .15rem; }

.vc-descricao { font-size: .95rem; line-height: 1.75; color: #2b2536; white-space: pre-line; }

/* Lateral */
.vc-lateral { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 1.1rem; }
.vc-preco-card { background: var(--vc-card); border-radius: var(--vc-radius); box-shadow: var(--vc-sombra); padding: 1.3rem 1.4rem; }
.vc-preco-card .preco { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; color: var(--achatudo-roxo, #7C3AED); }
.vc-fipe-comp { margin-top: .9rem; border-radius: 12px; padding: .8rem .95rem; background: var(--vc-autos-bg); border: 1px solid #F5DCB8; }
.vc-fipe-comp .linha { display: flex; justify-content: space-between; font-size: .84rem; font-weight: 700; margin-bottom: .25rem; gap: .5rem; }
.vc-fipe-comp .obs { font-size: .72rem; color: var(--vc-ink-2); margin-top: .35rem; }
.vc-zap {
    width: 100%; margin-top: 1rem; border: none; border-radius: 12px; padding: .75rem; font-size: .95rem; font-weight: 800;
    color: #fff !important; background: #25D366; display: flex; align-items: center; justify-content: center; gap: .45rem;
}
.vc-zap:hover { filter: brightness(1.05); color: #fff; }

.vc-vendedor { background: var(--vc-card); border-radius: var(--vc-radius); box-shadow: var(--vc-sombra); padding: 1.2rem 1.4rem; }
.vc-vendedor .quem { display: flex; align-items: center; gap: .8rem; }
.vc-avatar { width: 52px; height: 52px; border-radius: 14px; background: var(--vc-autos-bg); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--vc-autos); overflow: hidden; }
.vc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.vc-vendedor h3 { font-size: .98rem; font-weight: 800; margin: 0; display: flex; align-items: center; gap: .35rem; }
.vc-vendedor h3 i { color: #0E9F6E; font-size: .9rem; }
.vc-vendedor .desde { font-size: .76rem; color: var(--vc-ink-2); }
.vc-estoque { display: block; text-align: center; margin-top: .9rem; font-size: .84rem; font-weight: 800; color: var(--achatudo-roxo, #7C3AED); background: #F3EEFE; border-radius: 12px; padding: .6rem; }

.vc-seguro { border-radius: var(--vc-radius); border: 1px solid var(--vc-linha); padding: 1rem 1.2rem; font-size: .78rem; color: var(--vc-ink-2); line-height: 1.6; background: var(--vc-card); }
.vc-seguro b { color: var(--vc-ink); display: flex; align-items: center; gap: .35rem; margin-bottom: .3rem; font-size: .82rem; }
.vc-seguro b i { color: #0E9F6E; }

.vc-indisponivel {
    border-radius: var(--vc-radius); padding: 1rem 1.2rem; margin: 1.1rem 0 0;
    background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .3);
    font-size: .9rem; font-weight: 700; color: #B45309; display: flex; align-items: center; gap: .5rem;
}

.vc-semelhantes { padding: 1.4rem 0 2rem; }
.vc-semelhantes h2 { font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; margin: 0 0 .9rem; }
.vc-sem-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 991px) { .vc-sem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Vagas de emprego (v4) ─────────────────────────────────── */
/* Card de vaga: sem imagem — 100% informação (cargo, salário+selo,
   condições, benefícios, empresa verificada, recência) */
.vc-vaga-card { padding: .85rem .95rem .75rem; display: flex; flex-direction: column; gap: .3rem; }
.vc-vaga-topo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .1rem; }
.vc-vaga-topo .anuncio-selo { flex-shrink: 0; }
.vc-vaga-area {
    font-size: .72rem; font-weight: 700; color: var(--vc-ink-2);
    display: inline-flex; align-items: center; gap: .3rem; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vc-vaga-area i { color: var(--achatudo-sucesso, #10B981); }
/* Na faixa estreita (230px) a área trunca feio — o selo sozinho conta a história */
.vc-strip-row .vc-vaga-area { display: none; }
.vc-vaga-card h3 { font-size: 1rem; font-weight: 800; line-height: 1.25; margin: 0; letter-spacing: -.01em; color: var(--vc-ink); }
.vc-vaga-salario { font-size: 1.15rem; font-weight: 800; color: var(--achatudo-sucesso, #10B981); }
.vc-combinar { font-size: .95rem; font-weight: 800; color: var(--vc-ink-2); }
.vc-vaga-cond { font-size: .78rem; color: var(--vc-ink-2); }
.vc-vaga-benef {
    font-size: .76rem; color: var(--vc-ink-2);
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.vc-vaga-benef i { color: var(--achatudo-alerta, #F59E0B); }
.vc-vaga-rodape {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    margin-top: auto; padding-top: .55rem; border-top: 1px solid var(--vc-linha);
}
.vc-vaga-rodape .vc-loja { margin-top: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; }
.vc-vaga-quando { font-size: .7rem; font-weight: 700; color: var(--vc-ink-2); flex-shrink: 0; }

/* Feirão de empregos ao vivo (v4 Etapa 5): banner quando há live no ar */
.vc-feirao {
    display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
    background: linear-gradient(90deg, rgba(239, 68, 68, .08), rgba(124, 58, 237, .08));
    border: 1.5px solid rgba(239, 68, 68, .3); border-radius: var(--vc-radius);
    padding: .9rem 1.2rem; margin-bottom: 1.2rem; text-decoration: none; color: var(--vc-ink);
}
.vc-feirao:hover { border-color: rgba(239, 68, 68, .55); color: var(--vc-ink); }
.vc-feirao-vivo {
    background: #EF4444; color: #fff; font-size: .72rem; font-weight: 800;
    border-radius: 99px; padding: .25rem .7rem; flex-shrink: 0; animation: vc-pulso 1.6s infinite;
}
@keyframes vc-pulso { 50% { opacity: .65; } }
.vc-feirao-texto { font-size: .9rem; flex: 1; min-width: 200px; }
.vc-feirao-cta { font-size: .85rem; font-weight: 800; color: #EF4444; flex-shrink: 0; }

/* Candidatura (v4 Etapa 3): botão primário interno + zap secundário */
.vc-zap-secundario { background: transparent !important; color: #1FA855 !important; border: 1.5px solid #25D366 !important; margin-top: .55rem; }
.vc-zap-secundario:hover { background: rgba(37, 211, 102, .08) !important; }
.vc-candidatura-ok {
    margin-top: 1rem; border-radius: 12px; padding: .8rem .95rem; font-size: .88rem; font-weight: 700;
    background: rgba(16, 185, 129, .1); border: 1px solid rgba(16, 185, 129, .3); color: #047857;
}
.vc-candidatura-ok i { margin-right: .25rem; }
.vc-candidatura-ok a { display: block; font-size: .78rem; margin-top: .3rem; color: #047857; }

/* Cabeçalho da página da vaga (sem galeria) */
.vc-cab-vaga { display: flex; gap: 1rem; align-items: flex-start; }
.vc-vaga-icone {
    flex: 0 0 64px; width: 64px; height: 64px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(16, 185, 129, .12), rgba(124, 58, 237, .1));
}
.vc-vaga-icone i { font-size: 1.8rem; color: var(--achatudo-sucesso, #10B981); }