/* Reset mínimo */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
video, svg { max-width: 100%; height: auto; }

/* Utilitário — esconde visualmente mas mantém pra leitor de tela (rótulos
   como "Abrir menu" do hambúrguer, que não tem texto visível). */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Qualquer classe daqui pra baixo que define display:flex/grid/inline-flex
   sem condição alguma vence o [hidden] do user-agent na cascata (mesma
   especificidade, mas autor sempre bate origem UA) — já corrigiu isso um
   por um (dropzone, campo, fieldset, botão) até virar óbvio que precisa ser
   regra global. Fica no topo do reset pra nenhum componente novo cair na
   mesma pegadinha de novo. */
[hidden] { display: none !important; }

body {
  font-family: var(--font-base), sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-primary);
  background: var(--color-bg-page);
}

a { color: inherit; }

/* Container — frame 1600, conteúdo máximo 1440, margem lateral 80 */
.jv-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-margin);
}

/* Botão — só os estados default de primary/secondary/inverse por enquanto.
   Hover/pressed/disabled de secondary/ghost/inverse ficam para quando o
   componente Button for implementado por inteiro (node 6008:986). */
.jv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-family: var(--font-base), sans-serif;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  line-height: var(--lh-label);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.jv-btn--sm { height: 40px; }
.jv-btn--md { height: 48px; padding: var(--space-3) var(--space-6); }
.jv-btn--full { width: 100%; }

.jv-btn--primary {
  background: var(--color-action-primary);
  color: var(--color-text-on-action);
}
.jv-btn--primary:hover  { background: var(--color-action-primary-hover); }
.jv-btn--primary:active { background: var(--color-action-primary-pressed); }

.jv-btn--secondary {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

.jv-btn--inverse {
  background: var(--color-bg-subtle);
  color: var(--color-action-primary);
}

.jv-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.jv-btn--ghost {
  background: transparent;
  color: var(--color-action-primary);
}
.jv-btn--ghost:hover { background: var(--color-action-subtle); }

.jv-btn[type="submit"] { border: 1px solid transparent; font: inherit; }
.jv-btn--secondary[type="submit"] { border-color: var(--color-border-strong); }

/* Header — altura 80 no desktop (>=1024), 64 abaixo disso. Dois temas
   (transparente na Home, sólido nas outras 13). Abaixo de 1024 o nav e as
   ações entram num painel de hambúrguer — ver .jv-header__painel. */
.jv-header {
  height: 64px;
  display: flex;
  align-items: center;
  width: 100%;
}
@media (min-width: 1024px) {
  .jv-header { height: 80px; }
}

.jv-header .jv-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  width: 100%;
  position: relative;
}

.jv-header--transparente {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: transparent;
  color: var(--color-text-on-action);
}
.jv-header--transparente .jv-header__nav a { color: var(--color-text-on-action); }

.jv-header--solido {
  position: relative;
  background: var(--color-bg-surface);
}
.jv-header--solido .jv-header__nav a { color: var(--color-text-link); }

.jv-header__logo img { height: 38px; width: auto; }
@media (min-width: 1024px) {
  .jv-header--transparente .jv-header__logo img { height: 48px; }
}

/* Botão hambúrguer — só existe abaixo de 1024. Ícone em 3 barras via
   pseudo-elementos, vira X quando aberto — sem depender de um SVG novo. */
.jv-header__hamburguer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.jv-header__hamburguer-icone,
.jv-header__hamburguer-icone::before,
.jv-header__hamburguer-icone::after {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform 0.15s ease, opacity 0.15s ease, background-color 0.15s ease;
}
.jv-header__hamburguer-icone { position: relative; }
.jv-header__hamburguer-icone::before { content: ""; position: absolute; top: -7px; left: 0; }
.jv-header__hamburguer-icone::after { content: ""; position: absolute; top: 7px; left: 0; }
.jv-header__hamburguer[aria-expanded="true"] .jv-header__hamburguer-icone { background: transparent; }
.jv-header__hamburguer[aria-expanded="true"] .jv-header__hamburguer-icone::before { transform: translateY(7px) rotate(45deg); }
.jv-header__hamburguer[aria-expanded="true"] .jv-header__hamburguer-icone::after { transform: translateY(-7px) rotate(-45deg); }

/* Painel do nav+ações — abaixo de 1024 é um dropdown recolhido (fecha com
   Esc, foco volta pro botão — ver data-jv-header-toggle em main.js); em
   1024+ vira display:contents pra nav e ações voltarem a ser filhos diretos
   do container e reproduzir o space-between original (logo | nav | ações). */
.jv-header__painel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-6);
  padding: var(--space-6) var(--container-margin) var(--space-8);
  background: var(--color-bg-surface);
  box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.16);
}
.jv-header__painel.jv-aberto { display: flex; }

.jv-header__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  font-size: var(--fs-body);
  line-height: var(--lh-label);
}
.jv-header__nav a { text-decoration: none; }
.jv-header__nav a[aria-current="page"] { font-weight: var(--fw-semibold); }
/* Painel aberto é sempre fundo claro — nav sempre em texto escuro aqui,
   nos dois temas, senão o link some (branco sobre branco) na Home. */
.jv-header__painel .jv-header__nav a { color: var(--color-text-link); }

.jv-header__acoes {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}

@media (min-width: 1024px) {
  .jv-header__hamburguer { display: none; }
  /* .jv-aberto tem mais especificidade que a regra de cima sozinha — sem
     repetir aqui, redimensionar a janela pra 1024+ com o menu ainda aberto
     (não fechado antes) deixaria o painel preso em display:flex. */
  .jv-header__painel,
  .jv-header__painel.jv-aberto { display: contents; }
  .jv-header__nav { flex-direction: row; align-items: center; gap: var(--space-6); }
  .jv-header__acoes { flex-direction: row; align-items: center; gap: var(--space-3); }
}

/* Footer — fundo bg/brand, não action/primary */
.jv-footer {
  background: var(--color-bg-brand);
  color: var(--color-text-on-action);
  padding-top: var(--space-16);
  padding-bottom: var(--space-8);
}

.jv-footer .jv-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.jv-footer__colunas {
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
  flex-wrap: wrap;
}

/* Quatro colunas (marca + 3) → duas em tablet → uma empilhada em mobile.
   flex-basis 100% / 50% / auto — em 1024+ volta pros tamanhos originais
   (marca fixa em 260, as outras dividindo o resto). */
.jv-footer__marca,
.jv-footer__coluna {
  flex: 1 1 100%;
  min-width: 0;
}
@media (min-width: 768px) {
  .jv-footer__marca,
  .jv-footer__coluna {
    flex: 1 1 calc(50% - var(--space-6) / 2);
  }
}
@media (min-width: 1024px) {
  .jv-footer__marca { flex: 0 0 260px; }
  .jv-footer__coluna { flex: 1 1 200px; }
}

.jv-footer__marca img { height: 50px; width: auto; }

.jv-footer__coluna {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.jv-footer__titulo {
  font-family: var(--font-base), sans-serif;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: -0.26px;
  margin: 0;
}

.jv-footer__coluna a {
  text-decoration: none;
}
.jv-footer__coluna a:hover {
  text-decoration: underline;
}

.jv-footer__acoes {
  display: flex;
  gap: var(--space-3);
}

.jv-footer__redes {
  display: flex;
  gap: var(--space-3);
}
.jv-footer__redes img { width: 25px; height: 25px; }

.jv-footer__divisor {
  height: 1px;
  background: var(--color-text-on-action);
  width: 100%;
  border: 0;
  margin: 0;
}

.jv-footer__copyright {
  text-align: center;
  margin: 0;
}

/* Home — Hero */
.jv-hero {
  position: relative;
  overflow: hidden;
}

.jv-hero__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.jv-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Gradiente específico da hero da Home — não é um token reutilizável */
  background: linear-gradient(90deg, rgba(89, 10, 16, 0.55) 0%, rgba(191, 21, 34, 0.55) 100%);
}

.jv-hero__conteudo {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  padding-top: var(--space-12);
  padding-bottom: var(--space-16);
  text-align: center;
}
@media (min-width: 1024px) {
  .jv-hero__conteudo { padding-top: 96px; padding-bottom: 120px; }
}

/* CTA "Quero ser anunciante" — largura total em mobile, compacto a partir
   de 768 (align-self isolado, não mexe no align-items:center do pai — os
   outros filhos, título/subtítulo/busca, já têm seu próprio teto de largura
   e continuam centralizados do mesmo jeito). */
.jv-hero__conteudo > .jv-btn { align-self: stretch; }
@media (min-width: 768px) {
  .jv-hero__conteudo > .jv-btn { align-self: center; }
}

.jv-hero__titulo {
  font-family: var(--font-base), sans-serif;
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: -1.36px;
  color: var(--color-text-on-inverse);
  max-width: 1100px;
  margin: 0;
}

.jv-hero__subtitulo {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-on-inverse);
  max-width: 344px;
  margin: 0;
}

/* Busca — estática por enquanto; autocomplete real é Fase 6 */
.jv-busca {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 640px;
  max-width: 100%;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}
.jv-busca > img { width: 24px; height: 24px; flex-shrink: 0; }
.jv-busca__campo {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font-base), sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh-label);
  color: var(--color-text-primary);
}
.jv-busca__campo::placeholder { color: var(--color-text-disabled); }

.jv-busca__resultados {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  right: 0;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.12);
  padding: var(--space-2) 0;
  text-align: left;
  max-height: 320px;
  overflow-y: auto;
  z-index: 20;
}
.jv-busca__grupo-titulo {
  margin: 0;
  padding: var(--space-2) var(--space-4);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.jv-busca__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  color: var(--color-text-primary);
  text-decoration: none;
  font-size: var(--fs-body);
}
.jv-busca__item:hover,
.jv-busca__item[aria-selected="true"] {
  background: var(--color-bg-subtle);
}
.jv-busca__item--anuncio { padding-left: calc(var(--space-4) + 16px + var(--space-2)); }
.jv-busca__vazio { margin: 0; padding: var(--space-3) var(--space-4); color: var(--color-text-secondary); }

/* Home — Categorias */
.jv-categorias {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-top: 80px;
  padding-bottom: 40px;
}

.jv-categorias__grade {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-6);
}

/* Sempre 2 colunas até 1024 (mobile e tablet) — rótulos curtos, 4
   empilhados em 1 coluna vira rolagem inútil. Só em 1024+ os 4 tiles
   cabem lado a lado com a largura fixa original. */
.jv-categoria {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 calc(50% - var(--space-6) / 2);
  max-width: 185px;
  text-decoration: none;
}
@media (min-width: 1024px) {
  .jv-categoria { flex: 0 0 185px; }
}

.jv-categoria__icone {
  width: min(165px, 100%);
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-full);
  background: var(--color-action-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.jv-categoria__icone img { width: 40%; height: 40%; object-fit: contain; }

/* Encontros: o ícone já vem com o círculo embutido no próprio SVG */
.jv-categoria__icone--flat {
  background: transparent;
}
.jv-categoria__icone--flat img { width: 100%; height: 100%; }

.jv-categoria__rotulo {
  font-family: var(--font-base), sans-serif;
  font-weight: var(--fw-medium);
  font-size: 25px;
  color: var(--color-bg-inverse);
  text-align: center;
}

/* Formulário — campo, input, textarea, select (template-parts/form/*) */
.jv-campo {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
}
/* [hidden] tem a mesma especificidade da classe acima — sem isto CSS de
   autor vence a cascata sobre o [hidden] do user-agent e o campo (ex:
   "Descreva sua característica") fica sempre visível mesmo com o atributo. */
.jv-campo[hidden] { display: none; }

/* Dois campos lado a lado (ex: Faixa de preço, Mínimo/Máximo) */
.jv-campo-par {
  display: flex;
  gap: var(--space-3);
}
.jv-campo-par > .jv-campo { flex: 1; min-width: 0; }

/* Campo colapsável (ex: "Descreva sua característica") — aparece com ease-in
   em vez de aparecer/sumir seco. grid-template-rows 0fr→1fr anima até a
   altura de conteúdo sem precisar saber o valor em px. [inert] tira do tab
   order e da leitura de tela enquanto fechado, já que ele continua no DOM
   (precisa continuar renderizado pra ter algo pra animar). */
.jv-campo--colapsavel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.25s ease-in, opacity 0.25s ease-in;
}
.jv-campo--colapsavel__conteudo {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 0;
}
.jv-campo--colapsavel.jv-campo--aberto {
  grid-template-rows: 1fr;
  opacity: 1;
}
.jv-campo label {
  font-family: var(--font-base), sans-serif;
  font-weight: var(--fw-medium);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-primary);
}

.jv-input,
.jv-textarea,
.jv-select {
  width: 100%;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-base), sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh-label);
  color: var(--color-text-primary);
}
.jv-textarea { min-height: 128px; line-height: var(--lh-body); resize: vertical; }
.jv-input::placeholder,
.jv-textarea::placeholder { color: var(--color-text-disabled); }

/* Foco em anel via box-shadow — nunca muda border-width/padding, então o
   box model do campo não se mexe (sem "tic" de altura na div pai). */
.jv-input:focus,
.jv-textarea:focus,
.jv-select:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 1px var(--color-border-focus);
}

.jv-campo--erro .jv-input,
.jv-campo--erro .jv-textarea {
  border-color: var(--color-feedback-error);
  background: var(--color-feedback-error-subtle);
}
.jv-campo__erro {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-feedback-error-text);
  font-size: var(--fs-body);
}

/* Página de formulário centralizado (Contato, Login, Registro) */
.jv-pagina-formulario {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  padding: 96px var(--container-margin);
}
.jv-pagina-formulario__cabecalho {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}
.jv-pagina-formulario__titulo {
  font-family: var(--font-base), sans-serif;
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: -0.63px;
  color: var(--color-text-primary);
  margin: 0;
}
.jv-pagina-formulario__subtitulo {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-secondary);
  margin: 0;
}

.jv-form-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: 640px;
  max-width: 100%;
}
.jv-form-card__rodape {
  text-align: center;
  font-size: var(--fs-body);
  color: var(--color-text-secondary);
}
.jv-form-card__rodape a { color: var(--color-text-link); font-weight: var(--fw-medium); text-decoration: none; }
.jv-form-card__rodape a:hover { text-decoration: underline; }

/* Contato/Login/Registro (as três telas de formulário centralizado) — em
   mobile a caixa perde borda e cantos arredondados e vai a sangria: sem
   padding lateral próprio, só o gutter do container. Moldura em tela
   estreita só rouba largura. Volta a ser uma caixa com moldura a partir
   de 768. */
.jv-pagina-formulario .jv-form-card {
  border: 0;
  border-radius: 0;
  padding-inline: 0;
}
@media (min-width: 768px) {
  .jv-pagina-formulario .jv-form-card {
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    padding-inline: var(--space-10);
  }
}

.jv-form-card--estreito { width: 480px; }
.jv-form-card--largo { width: 724px; }

/* Input Senha — campo + botão de alternar visibilidade (assets/js/main.js) */
.jv-input-senha {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.jv-input-senha:focus-within {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 1px var(--color-border-focus);
}
.jv-input-senha__campo {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font-base), sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh-label);
  color: var(--color-text-primary);
}
/* Botão 44x44 centralizado sobre o ícone de 20px — margin-block negativo
   compensa a diferença (44-20=24, 12 de cada lado) pra não esticar a altura
   fixa de 48 do campo; a área de toque cresce, o desenho não. */
.jv-input-senha__toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-block: -12px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
}

/* Checkbox — caixa 20x20, alvo de clique 44x44 envolvendo caixa + rótulo */
.jv-checkbox {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-height: 44px;
  cursor: pointer;
}
.jv-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  accent-color: var(--color-action-primary);
}
.jv-checkbox span {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-secondary);
}

/* Página de leitura (Termos de Uso, Política de Privacidade) — coluna 720px */
.jv-pagina-leitura {
  display: flex;
  justify-content: center;
  padding: 96px var(--container-margin) 120px;
}
/* Única tela onde a medida segue o texto, não o container — 65ch mantém a
   linha entre 65 e 75 caracteres em qualquer viewport/zoom, nunca em px. */
.jv-pagina-leitura__coluna {
  width: 100%;
  max-width: 65ch;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.jv-pagina-leitura__cabecalho {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.jv-pagina-leitura__cabecalho h1 {
  font-family: var(--font-base), sans-serif;
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: -0.63px;
  color: var(--color-text-primary);
  margin: 0;
}
.jv-pagina-leitura__meta {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-secondary);
  margin: 0;
}
.jv-pagina-leitura__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.jv-pagina-leitura__corpo h2 {
  font-family: var(--font-base), sans-serif;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: -0.26px;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-3);
}
.jv-pagina-leitura__corpo p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-3);
}
.jv-pagina-leitura__corpo p:last-child { margin-bottom: 0; }

/* Badge — rótulo curto, não clicável (node 6010:968) */
.jv-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-action-subtle);
  color: var(--color-action-primary);
  font-family: var(--font-base), sans-serif;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  line-height: var(--lh-label);
  white-space: nowrap;
}

/* Card de anúncio (node 6011:960) */
.jv-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.jv-card__imagem-wrap { position: relative; }
.jv-card__imagem {
  display: block;
  height: 220px;
  background: var(--color-bg-subtle);
}
.jv-card__imagem img { width: 100%; height: 100%; object-fit: cover; }

.jv-card__favorito {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-text-primary);
  cursor: pointer;
}
.jv-card__favorito[aria-pressed="true"] {
  color: var(--color-action-primary);
}
.jv-card__favorito[aria-pressed="true"] svg path {
  fill: currentColor;
}
.jv-card__conteudo {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
}
.jv-card__etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.jv-card__titulo {
  font-family: var(--font-base), sans-serif;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: -0.26px;
  color: var(--color-text-primary);
  margin: 0;
}
.jv-card__preco {
  font-family: var(--font-base), sans-serif;
  font-weight: var(--fw-medium);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-primary);
  margin: 0;
}
.jv-card__descricao {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-secondary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Grade de cards — flexbox com wrap, sem media query por item. Mobile: 1
   coluna. Tablet: 2. Desktop: 3. Wide: 4 — exceto Acompanhantes e Pesquisa
   Cidade (.jv-resultados), que têm a sidebar de filtros ao lado e travam em
   3 mesmo no wide, porque a grade sobra menos larga (node 6059:1097). */
.jv-grade-cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  width: 100%;
}
.jv-grade-cards > * { flex: 1 1 100%; min-width: 0; }

@media (min-width: 768px)  { .jv-grade-cards > * { flex-basis: calc((100% - var(--space-6)) / 2); } }
@media (min-width: 1024px) { .jv-grade-cards > * { flex-basis: calc((100% - var(--space-6) * 2) / 3); } }
@media (min-width: 1440px) { .jv-grade-cards > * { flex-basis: calc((100% - var(--space-6) * 3) / 4); } }

@media (min-width: 1440px) {
  .jv-resultados .jv-grade-cards > * { flex-basis: calc((100% - var(--space-6) * 2) / 3); }
}

.jv-pagina-listagem {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding-top: 80px;
  padding-bottom: 96px;
}
.jv-pagina-listagem__cabecalho {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.jv-pagina-listagem__titulo {
  font-family: var(--font-base), sans-serif;
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: -0.63px;
  color: var(--color-text-primary);
  margin: 0;
}
.jv-pagina-listagem__subtitulo {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-secondary);
  margin: 0;
}

/* Select — mesma altura 48 do Input, chevron sobreposto */
.jv-select-wrap { position: relative; width: 100%; }
.jv-select {
  width: 100%;
  appearance: none;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-8) var(--space-3) var(--space-4);
  font-family: var(--font-base), sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh-label);
  color: var(--color-text-primary);
}
.jv-select:invalid,
.jv-select option[value=""] { color: var(--color-text-disabled); }
.jv-select:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 1px var(--color-border-focus);
}
.jv-select-wrap__chevron {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Select com busca — mesma caixa do Select, lista de sugestão flutua por
   cima igual a Busca do Home (.jv-busca__resultados), mesma linguagem visual. */
.jv-select-busca__lista {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  right: 0;
  margin: 0;
  padding: var(--space-2) 0;
  list-style: none;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.12);
  max-height: 280px;
  overflow-y: auto;
  z-index: 20;
}
.jv-select-busca__lista[hidden] { display: none; }
.jv-select-busca__lista li {
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-base), sans-serif;
  font-size: var(--fs-body);
  color: var(--color-text-primary);
  cursor: pointer;
}
.jv-select-busca__lista li:hover,
.jv-select-busca__lista li[aria-selected="true"] { background: var(--color-bg-subtle); }
.jv-select-busca__lista li[hidden] { display: none; }
.jv-select-busca__vazio { margin: 0; padding: var(--space-2) var(--space-4); color: var(--color-text-secondary); font-size: var(--fs-body); }

/* Slider Faixa — duas pegas arrastáveis (input range nativo, sobrepostos)
   + entrada numérica como alternativa acessível por teclado (node 6050:1065) */
.jv-slider-faixa__trilho {
  position: relative;
  height: 20px;
  margin: 10px 0 var(--space-4);
}
.jv-slider-faixa__trilho::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  margin-top: -2px;
  border-radius: var(--radius-full);
  background: var(--color-border-default);
}
.jv-slider-faixa__preenchido {
  position: absolute;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  border-radius: var(--radius-full);
  background: var(--color-action-primary);
  pointer-events: none;
}
.jv-slider-faixa__pega {
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: var(--radius-full);
  background: var(--color-bg-surface);
  border: 4px solid var(--color-action-primary);
  box-sizing: border-box;
  cursor: grab;
  touch-action: none;
}
.jv-slider-faixa__pega:active { cursor: grabbing; }
/* Alvo de toque 44x44 sem crescer o desenho da pega (20px) — ::before
   esticado por cima, invisível, absorve o toque; o pointerdown/move em
   main.js escuta na pega, então o alvo do evento continua o mesmo elemento. */
.jv-slider-faixa__pega::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.jv-slider-faixa__pega:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
.jv-slider-faixa__valores {
  display: flex;
  gap: var(--space-3);
}
.jv-slider-faixa__valores .jv-campo { flex: 1; min-width: 0; gap: var(--space-1); }
.jv-slider-faixa__valores label {
  font-size: 13px;
  color: var(--color-text-secondary);
  font-weight: var(--fw-regular);
}
/* Campo de valor com prefixo "R$" (Input Moeda) — mesmo padrão de wrapper
   do Input Senha: borda/fundo na div, input interno sem borda própria.
   Setinhas nativas do number somem pro campo ficar plano como os outros.
   Foco em anel via box-shadow, sem mexer no box model (sem tic de altura). */
.jv-input-moeda {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.jv-input-moeda:focus-within {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 1px var(--color-border-focus);
}
.jv-input-moeda__prefixo,
.jv-input-moeda__sufixo {
  flex-shrink: 0;
  font-family: var(--font-base), sans-serif;
  font-size: var(--fs-body);
  color: var(--color-text-secondary);
}
.jv-input-moeda__campo {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font-base), sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh-label);
  color: var(--color-text-primary);
}
.jv-input-moeda__campo::placeholder { color: var(--color-text-disabled); }
.jv-input-moeda__campo::-webkit-outer-spin-button,
.jv-input-moeda__campo::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.jv-input-moeda__campo[type="number"] { appearance: textfield; -moz-appearance: textfield; }

/* Na sidebar de filtros o campo é mais compacto que no formulário de cadastro */
.jv-filtros .jv-input-moeda { padding: var(--space-2) var(--space-3); }

/* Tela Acompanhantes e Pesquisa Cidade — sidebar de filtros + resultados.
   Abaixo de 1024 os filtros viram um <details> recolhido (rótulo "Filtros")
   acima dos resultados — funciona sem JS. Em 1024+ o <details> fica
   sempre aberto e lado a lado com os resultados, como antes. */
.jv-listagem-com-filtros {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  align-items: stretch;
  padding-top: 64px;
  padding-bottom: 96px;
}
.jv-filtros {
  width: 100%;
  min-width: 0;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.jv-filtros__titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 44px;
  margin: 0;
  font-family: var(--font-base), sans-serif;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: -0.26px;
  color: var(--color-text-primary);
  cursor: pointer;
  list-style: none;
}
.jv-filtros__titulo::-webkit-details-marker { display: none; }
.jv-filtros__titulo::after {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.jv-filtros[open] .jv-filtros__titulo::after { transform: rotate(-135deg); }
/* O gap acima só separa os filhos diretos de .jv-filtros — título e form.
   Sem isso o <form> vira um só filho e os campos dentro dele ficam colados. */
.jv-filtros form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: 100%;
  margin-top: var(--space-5);
}
.jv-resultados {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

@media (min-width: 1024px) {
  .jv-listagem-com-filtros { flex-direction: row; align-items: flex-start; gap: var(--space-12); }
  .jv-filtros {
    flex: 0 0 320px;
    /* Sem isto, o <select> de Categoria/Característica (o navegador calcula
       o tamanho mínimo dele pela opção mais larga, tipo "Todas as
       características") força o item flex a crescer além dos 320px fixos —
       mesmo com flex-shrink:0 e width:100% no select. Mesmo ajuste que
       .jv-resultados já tinha do lado oposto. */
    width: auto;
  }
  .jv-filtros__titulo { cursor: default; }
  .jv-filtros__titulo::after { display: none; }
  /* Força aberto independente do atributo [open] — desktop sempre mostra
     os filtros, sem depender do <details> ter sido clicado. */
  .jv-filtros form { display: flex !important; }
}

/* Paginação (node 6048:1032) */
.jv-paginacao {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-content: center;
  width: 100%;
}
/* Item 40x40 no design — abaixo de 1024 sobe pra 44 (alvo mínimo de toque);
   volta a 40 em 1024+, onde o ponteiro é o mouse. */
.jv-paginacao__seta,
.jv-paginacao__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-family: var(--font-base), sans-serif;
  font-size: var(--fs-body);
  color: var(--color-text-primary);
}
@media (min-width: 1024px) {
  .jv-paginacao__seta,
  .jv-paginacao__item { width: 40px; height: 40px; }
}
.jv-paginacao__seta--desabilitada { opacity: 0.4; }
.jv-paginacao__item--ativo {
  background: var(--color-action-primary);
  color: var(--color-text-on-action);
  font-weight: var(--fw-semibold);
}

/* Variantes de tom do Badge — dark = ênfase, neutral = informativo (accent é o .jv-badge padrão) */
.jv-badge--dark { background: var(--color-bg-inverse); color: var(--color-text-on-inverse); }
.jv-badge--neutral { background: var(--color-bg-subtle); color: var(--color-text-secondary); }

/* Página da modelo — colunas 992+400 lado a lado em >=1024; abaixo disso o
   card de contato vai pra CIMA das informações (quem chegou pela busca quer
   o contato, não a descrição). Reordena só visualmente via flex order — a
   ordem de leitura/DOM continua informações→contato. */
.jv-modelo {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-top: 64px;
  padding-bottom: 96px;
}
.jv-modelo__informacoes {
  order: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
@media (min-width: 1024px) {
  .jv-modelo { flex-direction: row; align-items: flex-start; gap: var(--space-12); }
  .jv-modelo__informacoes { order: 0; flex: 1; }
}
.jv-modelo__secao { display: flex; flex-direction: column; gap: var(--space-3); }
.jv-modelo__secao h2 {
  font-family: var(--font-base), sans-serif;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: -0.26px;
  color: var(--color-text-primary);
  margin: 0;
}
.jv-modelo__secao p { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-text-secondary); overflow-wrap: break-word; }

.jv-modelo__identificacao { gap: var(--space-3); }
.jv-modelo__nome {
  font-family: var(--font-base), sans-serif;
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: -0.63px;
  color: var(--color-text-primary);
  margin: 0;
}
.jv-modelo__meta { display: flex; gap: var(--space-2); }
.jv-modelo__etiquetas { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.jv-modelo__preco-rotulo { font-weight: var(--fw-medium); color: var(--color-text-secondary); margin: 0; }
.jv-modelo__preco {
  font-family: var(--font-base), sans-serif;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: -0.26px;
  color: var(--color-text-primary);
  margin: 0;
}

/* Servico Tile (node 6043:1032) */
.jv-servicos-grade {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
/* 4 colunas no desktop → 2 em tablet e mobile (nunca 1 — mesmo raciocínio
   das Categorias da Home: em telas estreitas um tile 220px fixo por linha
   vira rolagem vertical desnecessária). */
.jv-servico-tile {
  flex: 1 1 calc(50% - var(--space-3) / 2);
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-action-primary);
}
@media (min-width: 1024px) {
  .jv-servico-tile { flex: 0 1 220px; }
}
.jv-servico-tile p {
  margin: 0;
  font-family: var(--font-base), sans-serif;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  line-height: var(--lh-label);
  color: var(--color-text-on-action);
  text-align: center;
}
.jv-servico-tile--nao-oferece { background: var(--color-bg-muted); }
.jv-servico-tile--nao-oferece p { color: var(--color-text-secondary); text-decoration: line-through; }

/* Mapa — embed do Google Maps, nível cidade apenas (nunca endereço exato) */
.jv-mapa {
  width: 100%;
  height: 320px;
  overflow: hidden;
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}
.jv-mapa iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Galeria de fotos (página da modelo) — tira de miniaturas; clicar em
   qualquer uma abre o visualizador em tela cheia (.jv-lightbox, controlado
   por data-jv-galeria em main.js). Carrossel: 4 imagens visíveis no desktop
   (item fixo 220px) → 1 por vez em mobile (item ~largura do contêiner),
   com scroll-snap e swipe nativo (overflow-x:auto já entrega o swipe). */
.jv-galeria-fotos {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}
.jv-galeria-fotos__item {
  flex: 0 0 calc(100% - var(--space-12));
  aspect-ratio: 1 / 1;
  scroll-snap-align: start;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-subtle);
  cursor: pointer;
}
@media (min-width: 768px) {
  .jv-galeria-fotos__item { flex: 0 0 220px; aspect-ratio: auto; height: 220px; }
}
.jv-galeria-fotos__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jv-galeria-fotos__item:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
.jv-galeria-fotos--vazia { height: 220px; border-radius: var(--radius-lg); background: var(--color-bg-subtle); }

/* Visualizador em tela cheia — foto inteira sem cortar (object-fit:contain,
   diferente da miniatura que corta pra preencher o quadrado). */
.jv-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.9);
}
.jv-lightbox[hidden] { display: none; }
.jv-lightbox__imagem { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: var(--radius-md); }
.jv-lightbox__fechar,
.jv-lightbox__seta {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.jv-lightbox__fechar {
  top: var(--space-4);
  right: var(--space-4);
  width: 44px;
  height: 44px;
  font-size: 22px;
  line-height: 1;
  color: var(--color-text-primary);
}
.jv-lightbox__seta { top: 50%; transform: translateY(-50%); width: 44px; height: 44px; }
.jv-lightbox__seta--anterior { left: var(--space-4); }
.jv-lightbox__seta--proxima { right: var(--space-4); }
.jv-lightbox__seta:disabled { opacity: 0.4; cursor: default; }
.jv-lightbox__fechar:focus-visible,
.jv-lightbox__seta:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
.jv-lightbox__contador {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  color: #fff;
  font-size: var(--fs-body);
}

/* Trava o scroll do body atrás do lightbox aberto */
.jv-sem-scroll { overflow: hidden; }

/* Card de contato / CTA WhatsApp */
.jv-contato-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
}
@media (min-width: 1024px) {
  .jv-contato-card { width: 400px; flex-shrink: 0; }
}
/* Sem isto o <form> vira um só filho do gap acima e os campos dentro dele
   (nome/telefone/mensagem/botão) ficam colados — mesmo ajuste que
   .jv-filtros form já precisou. */
.jv-contato-card form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.jv-cta-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-5) var(--space-8);
  border-radius: var(--radius-md);
  background: var(--color-action-primary);
  color: var(--color-text-on-action);
  text-decoration: none;
  font-family: var(--font-base), sans-serif;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
}
.jv-cta-whatsapp--md { padding: var(--space-3) var(--space-6); }
.jv-cta-whatsapp img { width: 24px; height: 24px; }

/* CTA WhatsApp fixa (abaixo de 768) — elemento à parte do botão embutido no
   card de contato, não o mesmo reposicionado. É a ação que o site inteiro
   existe pra gerar, não pode depender de rolagem: se fosse só o botão do
   card com position:sticky, ele ficaria preso à altura curta do
   .jv-contato-card e sumiria assim que a pessoa rolasse até a descrição,
   bem mais abaixo. position:fixed independe de onde fica no DOM — largura
   total, fundo sólido, área segura do iOS reservada. Reserva o espaço
   equivalente no rodapé da página (body.single-jv_anuncio) pra não tampar
   o footer. Some em 768+, onde o botão do card já é suficiente. */
.jv-cta-whatsapp-fixo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  padding: var(--space-4) var(--container-margin);
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  background: var(--color-action-primary);
  color: var(--color-text-on-action);
  text-decoration: none;
  font-family: var(--font-base), sans-serif;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
}
.jv-cta-whatsapp-fixo img { width: 24px; height: 24px; }
body.single-jv_anuncio { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }

@media (min-width: 768px) {
  .jv-cta-whatsapp-fixo { display: none; }
  body.single-jv_anuncio { padding-bottom: 0; }
}

.jv-contato-card__telefone {
  text-align: center;
  font-family: var(--font-base), sans-serif;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  color: var(--color-action-primary);
  margin: 0;
}
.jv-contato-card__divisor { height: 1px; background: var(--color-border-subtle); border: 0; margin: 0; }
.jv-contato-card__rotulo { font-weight: var(--fw-medium); margin: 0; }

/* Outros anúncios */
.jv-relacionados {
  padding: 0 var(--container-margin) 96px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
/* Alert (node 6018:985) — tom decide cor de fundo, borda e texto */
.jv-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  width: 100%;
  box-sizing: border-box;
}
.jv-alert p { margin: 0; }
.jv-alert img { flex-shrink: 0; margin-top: 3px; }
.jv-alert--info    { background: var(--color-feedback-info-subtle);    border-color: var(--color-feedback-info);    color: var(--color-feedback-info-text); }
.jv-alert--success { background: var(--color-feedback-success-subtle); border-color: var(--color-feedback-success); color: var(--color-feedback-success-text); }
.jv-alert--warning { background: var(--color-feedback-warning-subtle); border-color: var(--color-feedback-warning); color: var(--color-feedback-warning-text); }
.jv-alert--error    { background: var(--color-feedback-error-subtle);   border-color: var(--color-feedback-error);   color: var(--color-feedback-error-text); }

/* Painel do anunciante — casca (node 6037:968). Abaixo de 1024 a sidebar
   sobe pra CIMA do conteúdo; o bloco de perfil (avatar+nome+dados) vira uma
   faixa horizontal compacta em vez da coluna centralizada do desktop, senão
   ocupa altura demais antes de qualquer coisa útil. */
.jv-painel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 680px;
}
.jv-painel__sidebar {
  flex: 0 0 auto;
  background: var(--color-bg-muted);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.jv-painel__perfil {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
}
.jv-painel__perfil-texto {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.jv-avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--color-action-subtle);
  color: var(--color-action-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-base), sans-serif;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
}
.jv-painel__boas-vindas {
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
  text-align: left;
  margin: 0;
}
.jv-painel__dados { display: flex; flex-direction: column; gap: var(--space-1); }
.jv-painel__dados p { margin: 0; color: var(--color-text-secondary); }
.jv-painel__acao-mensagens { position: relative; width: 100%; }
.jv-painel__sair {
  display: block;
  text-align: center;
  margin-top: var(--space-3);
  font-size: var(--fs-body);
  color: var(--color-text-secondary);
  text-decoration: none;
}
.jv-painel__sair:hover { text-decoration: underline; }
.jv-painel__contagem {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--color-action-primary);
  border: 2px solid var(--color-bg-muted);
  color: var(--color-text-on-action);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jv-painel__principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Painel Tab — 4 abas fixas de 400 somam 1600 no design; não empilha, não
   encolhe: abaixo de 1024 vira rolagem horizontal com scroll-snap, largura
   mínima 160 por aba. A aba ativa entra em cena sozinha ao carregar via
   scrollIntoView (data-jv-header-toggle/.jv-painel-aba--ativa em main.js). */
.jv-painel__abas {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  background: var(--color-bg-muted);
}
.jv-painel-aba {
  flex: 1 0 160px;
  min-width: 160px;
  scroll-snap-align: start;
  text-align: center;
  padding: var(--space-4) var(--space-2);
  text-decoration: none;
  color: var(--color-text-secondary);
  font-family: var(--font-base), sans-serif;
  font-size: 14px;
  border-bottom: 3px solid transparent;
}
.jv-painel-aba--ativa {
  background: var(--color-bg-surface);
  color: var(--color-action-primary);
  font-weight: var(--fw-semibold);
  border-bottom-color: var(--color-action-primary);
}
.jv-painel__conteudo { flex: 1; padding: var(--space-6); background: var(--color-bg-page); }
.jv-painel__conteudo > .jv-alert { margin-bottom: var(--space-6); }

@media (min-width: 1024px) {
  .jv-painel { flex-direction: row; }
  .jv-painel__sidebar { flex: 0 0 320px; padding: var(--space-8) var(--space-6); gap: var(--space-6); }
  .jv-painel__perfil { flex-direction: column; gap: var(--space-3); }
  .jv-painel__perfil-texto { align-items: center; }
  .jv-avatar { width: 96px; height: 96px; font-size: var(--fs-h3); }
  .jv-painel__boas-vindas { text-align: center; }
  .jv-painel__dados { align-items: center; gap: var(--space-2); }
  .jv-painel__abas { overflow-x: visible; scroll-snap-type: none; }
  .jv-painel-aba { flex: 1; min-width: 0; padding: var(--space-6) var(--space-4); font-size: var(--fs-body); }
  .jv-painel__conteudo { padding: var(--space-8); }
}

/* Cabeçalho da tela 07 — título+contador em cima, botão "Novo anúncio" em
   largura total embaixo abaixo de 640 (o contador nunca some — é ele que
   explica o botão desabilitado ao chegar no limite). */
.jv-painel__secao-cabecalho {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.jv-painel__secao-cabecalho > .jv-btn { width: 100%; }
@media (min-width: 640px) {
  .jv-painel__secao-cabecalho { flex-direction: row; align-items: center; justify-content: space-between; }
  .jv-painel__secao-cabecalho > .jv-btn { width: auto; }
}
.jv-painel__secao-titulo { font-family: var(--font-base), sans-serif; font-weight: var(--fw-semibold); font-size: var(--fs-h3); color: var(--color-text-primary); margin: 0; }
.jv-painel__secao-sub { color: var(--color-text-secondary); margin: 0; }
/* .jv-campo com label + texto de ajuda + select aninhado (Categoria,
   Característica) — o gap padrão de 8px do .jv-campo fica apertado com três
   blocos empilhados; esses compostos usam :has() (já usado no dropzone de
   upload) pra respirar mais sem mexer no gap geral de todo campo do site. */
.jv-campo:has(> .jv-painel__secao-sub) { gap: var(--space-3); }

/* Toggle — trilho 44x24, bolinha 20 (node 6017:966). O rótulo envolve com
   min-height:44 pra o alvo de toque crescer sem o desenho crescer. */
.jv-toggle { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; }
.jv-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.jv-toggle__trilho {
  width: 44px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--color-action-disabled);
  position: relative;
  transition: background-color 0.15s ease;
}
.jv-toggle__bolinha {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-bg-surface);
  transition: left 0.15s ease;
}
.jv-toggle input:checked + .jv-toggle__trilho { background: var(--color-action-primary); }
.jv-toggle input:checked + .jv-toggle__trilho .jv-toggle__bolinha { left: 22px; }
.jv-toggle input:focus-visible + .jv-toggle__trilho { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }

.jv-lista { display: flex; flex-direction: column; }

/* Sub-abas dentro de Meus Dados (node 6046:1039) — Dados/Identidade/Senha.
   3 abas de 180px (556px) já não cabem em 375 — rolagem horizontal própria
   em vez de estourar a largura da página. */
.jv-subabas { display: flex; gap: var(--space-2); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.jv-subaba {
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-4);
  width: 180px;
  text-decoration: none;
  color: var(--color-text-secondary);
  font-family: var(--font-base), sans-serif;
  font-size: var(--fs-body);
  border-bottom: 3px solid transparent;
}
.jv-subaba--ativa {
  color: var(--color-action-primary);
  font-weight: var(--fw-semibold);
  border-bottom-color: var(--color-action-primary);
}

.jv-form-card--painel { width: 720px; padding: var(--space-8); }

/* Estado Vazio (node 6047:1022) — sempre com saída */
.jv-estado-vazio {
  width: 560px;
  max-width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-12);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-lg);
  text-align: center;
}
.jv-estado-vazio__titulo {
  font-family: var(--font-base), sans-serif;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--color-text-primary);
  margin: 0;
}
.jv-estado-vazio__texto { margin: 0; color: var(--color-text-secondary); }

/* Seletor de Serviços (node 6094:1110) + Chip Servico (node 6094:1057) */
.jv-seletor-servicos {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  max-width: 560px;
}
.jv-seletor-servicos__titulo { margin: 0; font-weight: var(--fw-medium); color: var(--color-text-primary); }
.jv-seletor-servicos__ajuda { margin: 0; color: var(--color-text-secondary); }
/* Campo + botão "Adicionar" lado a lado — abaixo de 640 empilha (campo e
   botão em largura total). O Enter já adiciona, o botão é redundância pro
   mouse; nem por isso ele deveria comer a largura do campo em mobile. */
.jv-seletor-servicos__adicionar { display: flex; flex-direction: column; gap: var(--space-3); align-items: stretch; }
.jv-seletor-servicos__campo { flex: 1; min-width: 0; }
.jv-seletor-servicos__botao { width: 100%; }
@media (min-width: 640px) {
  .jv-seletor-servicos__adicionar { flex-direction: row; align-items: center; }
  .jv-seletor-servicos__botao { width: auto; }
}
/* min-width:0 no contêiner de chips — sem isso um chip com o texto inteiro
   (Serviço é campo livre, até 60 caracteres) empurra tudo pra fora da coluna
   de 560px do seletor. */
.jv-seletor-servicos__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.jv-seletor-servicos__contagem { margin: 0; color: var(--color-text-secondary); }

/* Chip Servico — texto livre até 60 caracteres, um chip com o texto inteiro
   estoura a linha. max-width/min-width:0 no chip + ellipsis só no texto; o
   botão de remover tem flex-shrink:0 — ele nunca some, o texto que corta. */
.jv-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  min-width: 0;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-family: var(--font-base), sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh-label);
}
.jv-chip--oferece { background: var(--color-action-primary); color: var(--color-text-on-action); }
.jv-chip--recusa  { background: var(--color-bg-muted); color: var(--color-text-secondary); }
.jv-chip__texto {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jv-chip__remover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: inherit;
  line-height: 1;
  font-size: 14px;
}

/* Upload Dropzone (node 6049:1048) — altura mínima menor em mobile. */
.jv-upload-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 160px;
  width: 100%;
  padding: var(--space-6);
  background: var(--color-bg-subtle);
  border: 1px dashed var(--color-border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .jv-upload-dropzone { min-height: 200px; }
}
.jv-upload-dropzone p { margin: 0; font-family: var(--font-base), sans-serif; font-weight: var(--fw-medium); color: var(--color-text-primary); }
.jv-upload-dropzone__ajuda { font-weight: var(--fw-regular) !important; color: var(--color-text-secondary) !important; }
/* "Arraste ou clique" não faz sentido em toque — arrastar não existe lá.
   Troca por "toque para escolher" com base na capacidade real do
   ponteiro, não na largura da tela (um tablet largo também é toque). */
.jv-upload-dropzone__texto-toque { display: none; }
@media (hover: none) and (pointer: coarse) {
  .jv-upload-dropzone__texto-ponteiro { display: none; }
  .jv-upload-dropzone__texto-toque { display: inline; }
}
.jv-upload-dropzone__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.jv-upload-dropzone:has(.jv-upload-dropzone__input:focus-visible) { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
.jv-upload-dropzone--sobre { border-color: var(--color-action-primary); background: var(--color-action-subtle); }
.jv-upload-dropzone[aria-disabled="true"] { cursor: not-allowed; opacity: 0.6; }
.jv-upload-dropzone__prompt { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.jv-upload-dropzone__preview { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); max-width: 100%; }
/* [hidden] tem a mesma especificidade da classe acima — sem isto o CSS da
   classe vence a cascata e o atributo hidden vira decorativo (prompt e
   preview ficam visíveis ao mesmo tempo, um empurrando layout do outro). */
.jv-upload-dropzone__prompt[hidden],
.jv-upload-dropzone__preview[hidden] { display: none; }
.jv-upload-dropzone__miniatura { max-height: 120px; max-width: 100%; border-radius: var(--radius-md); object-fit: cover; }
.jv-upload-dropzone__nome {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-body);
  color: var(--color-text-secondary) !important;
}
/* Prévia dos arquivos ainda não enviados (Galeria, upload múltiplo) — grade
   com remover individual por card, pra dar pra controlar o que já foi
   selecionado conforme vai incluindo, em vez de só ver o primeiro arquivo. */
.jv-upload-lista { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* 3 por linha em mobile (flex-basis calculado); volta ao tamanho fixo
   original — 80x80 — a partir de 1024. */
.jv-upload-lista__item {
  position: relative;
  flex: 1 1 calc((100% - var(--space-3) * 2) / 3);
  aspect-ratio: 1 / 1;
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md);
}
@media (min-width: 1024px) {
  .jv-upload-lista__item { flex: 0 0 80px; aspect-ratio: auto; height: 80px; }
}
.jv-upload-lista__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  display: block;
}
.jv-upload-lista__nome {
  position: absolute;
  inset: auto 0 0 0;
  margin: 0;
  padding: var(--space-1);
  font-size: 11px;
  line-height: 1.3;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
/* Upload Thumb — o X 22px fora do quadro encosta no vizinho quando 3 cabem
   por linha em tela estreita: entra pra dentro (top/right:4) com fundo
   sólido (já tinha) até 1024, onde volta a pendurar na borda como antes.
   Alvo de toque cresce pra 44 via ::after esticado, sem aumentar o desenho. */
.jv-upload-lista__remover {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  cursor: pointer;
  line-height: 1;
  font-size: 14px;
}
.jv-upload-lista__remover::after {
  content: "";
  position: absolute;
  inset: -11px;
}
@media (min-width: 1024px) {
  .jv-upload-lista__remover { top: -8px; right: -8px; }
}
/* Fotos já salvas usam o mesmo cartão/badge das recém-selecionadas, mas o
   badge aqui é um <label> em volta de um checkbox (remover_galeria[]) —
   marcar só sinaliza a remoção, que só acontece de fato ao salvar. Checkbox
   escondido do mesmo jeito que o input do dropzone, não com display:none
   (que tiraria do toque/tab). */
.jv-upload-lista__remover-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.jv-upload-lista__remover:has(.jv-upload-lista__remover-input:checked) {
  background: var(--color-feedback-error-subtle);
  border-color: var(--color-feedback-error);
  color: var(--color-feedback-error-text);
}
.jv-upload-lista__remover:has(.jv-upload-lista__remover-input:focus-visible) {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.jv-form-card__form { width: 100%; display: flex; flex-direction: column; gap: var(--space-6); }
.jv-form-cadastro { display: flex; flex-direction: column; gap: var(--space-6); max-width: 1216px; }

/* Stepper (node 6050:1044) */
.jv-stepper { display: flex; align-items: flex-start; width: 100%; max-width: 1216px; margin-top: var(--space-6); margin-bottom: var(--space-8); }
.jv-step { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); width: auto; flex-shrink: 0; }
.jv-step__marcador {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  font-family: var(--font-base), sans-serif;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  box-sizing: border-box;
}
.jv-step__marcador img { width: 20px; height: 20px; }
.jv-step--concluido .jv-step__marcador { background: var(--color-action-primary); }
.jv-step--atual .jv-step__marcador { background: var(--color-action-primary); border: 4px solid var(--color-action-subtle); color: var(--color-text-on-action); }
.jv-step--pendente .jv-step__marcador { background: var(--color-bg-subtle); border: 4px solid var(--color-border-default); color: var(--color-text-disabled); }
.jv-step__rotulo { margin: 0; font-family: var(--font-base), sans-serif; font-size: 13px; line-height: var(--lh-label); text-align: center; }
.jv-step--concluido .jv-step__rotulo { color: var(--color-text-primary); }
.jv-step--atual .jv-step__rotulo { color: var(--color-action-primary); }
.jv-step--pendente .jv-step__rotulo { color: var(--color-text-disabled); }
.jv-step__conector { flex: 1 1 auto; align-self: center; height: 3px; min-width: 24px; margin: 0 var(--space-2); background: var(--color-border-default); }
.jv-step__conector--preenchido { background: var(--color-action-primary); }
@media (min-width: 768px) { .jv-step { width: 140px; } .jv-step__rotulo { font-size: var(--fs-body); } }

/* Formulário em etapas — cada fieldset é um passo; JS troca qual aparece. */
.jv-form-step { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; border: 0; padding: 0; margin: 0; }
.jv-form-step[hidden] { display: none; }
/* margin-left:auto no botão de ação (não justify-content:space-between) —
   assim ele fica sempre encostado na direita mesmo quando "Voltar" some
   (etapa 1), em vez de pular pra esquerda por sobrar um filho só no flex. */
.jv-form-cadastro__navegacao { display: flex; gap: var(--space-3); width: 100%; }
.jv-form-cadastro__navegacao [data-jv-form-acao] { margin-left: auto; }

.jv-form-card__acao { display: flex; justify-content: flex-end; gap: var(--space-3); width: 100%; }
.jv-form-card p.jv-painel__secao-titulo,
.jv-form-card p.jv-painel__secao-sub { margin: 0; }

/* Linha de Lista — anúncio no painel (node 6051:1054). 1180x96 com 5
   elementos em linha não cabe em 375: abaixo de 768 vira duas faixas —
   miniatura+info em cima, ações embaixo em largura total. O toggle fica
   junto do título (ligar/desligar é estado), não com os botões (editar e
   deletar são ações). Em 768+, .jv-linha-lista__topo vira display:contents
   e miniatura/info voltam a ser filhos diretos da linha, reproduzindo a
   única faixa original. */
.jv-linha-lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}
.jv-linha-lista__topo {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.jv-linha-lista__miniatura {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  background: var(--color-bg-muted);
  overflow: hidden;
}
.jv-linha-lista__miniatura img { width: 100%; height: 100%; object-fit: cover; }
.jv-linha-lista__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.jv-linha-lista__titulo-linha { display: flex; align-items: center; gap: var(--space-2); }
.jv-linha-lista__titulo { margin: 0; font-weight: var(--fw-medium); color: var(--color-text-primary); }
.jv-linha-lista__meta { margin: 0; color: var(--color-text-secondary); }
.jv-linha-lista__acoes { display: flex; align-items: center; gap: var(--space-3); width: 100%; }
.jv-linha-lista__acoes form { display: contents; }
.jv-linha-lista__acoes > a,
.jv-linha-lista__acoes button { flex: 1; }

@media (min-width: 768px) {
  .jv-linha-lista { flex-direction: row; align-items: center; gap: var(--space-4); }
  .jv-linha-lista__topo { display: contents; }
  .jv-linha-lista__acoes { width: auto; flex-shrink: 0; }
  .jv-linha-lista__acoes > a,
  .jv-linha-lista__acoes button { flex: initial; }
}

.jv-relacionados h2,
.jv-resultados__relacionados h2 {
  font-family: var(--font-base), sans-serif;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--color-text-primary);
  margin: 0;
}

/* Igual ao .jv-relacionados mas sem o padding — já vive dentro de um
   container com padding próprio (Pesquisa Cidade). */
.jv-resultados__relacionados {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-8);
}