/* ==========================================================================
   VAI SABER IMÓVEIS — vsi.css
   --------------------------------------------------------------------------
   Componentes visuais modernos para as páginas novas do portal.

   IMPORTANTE: tudo aqui vive dentro de .vsi-pagina.
   O portal ainda usa o site.css de 2013 nas páginas antigas, então este
   arquivo NÃO pode mexer em body, a, img ou h1 soltos — quebraria o resto
   do site. Por isso os resets estão com escopo.
   ========================================================================== */

:root {
  /* Base e superfície */
  --vsi-azul:            #0a1628;
  --vsi-azul-claro:      #16294a;
  --vsi-branco:          #ffffff;
  --vsi-fundo:           #f6f7f9;

  /* Acento — só em ação, preço e etiqueta */
  --vsi-dourado:         #C4A000;
  --vsi-dourado-escuro:  #a38600;
  --vsi-dourado-claro:   #fdf8e3;

  /* Semântica */
  --vsi-whatsapp:        #25d366;
  --vsi-sucesso:         #1a7f37;
  --vsi-alerta:          #b91c1c;

  /* Hierarquia por opacidade — não criar cinzas novos */
  --vsi-texto:           #0a1628;
  --vsi-texto-2:         rgba(10, 22, 40, 0.62);
  --vsi-texto-3:         rgba(10, 22, 40, 0.44);
  --vsi-texto-off:       rgba(10, 22, 40, 0.24);
  --vsi-borda:           rgba(10, 22, 40, 0.10);
  --vsi-borda-forte:     rgba(10, 22, 40, 0.18);

  /* Tipografia */
  --vsi-fonte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Raio e elevação */
  --vsi-r-sm: 8px;  --vsi-r-md: 10px;  --vsi-r-lg: 12px;  --vsi-r-full: 9999px;
  --vsi-sombra-2: 0 2px 8px rgba(10, 22, 40, 0.08);
  --vsi-sombra-3: 0 8px 24px rgba(10, 22, 40, 0.12);

  /* Movimento */
  --vsi-mov-rapido: 120ms;
  --vsi-mov-padrao: 200ms;
  --vsi-curva: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ==========================================================================
   ESCOPO — resets só dentro da página nova
   ========================================================================== */

.vsi-pagina {
  font-family: var(--vsi-fonte);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--vsi-texto);
  -webkit-font-smoothing: antialiased;
  padding: 8px 0 48px;
}

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

.vsi-pagina a { color: inherit; text-decoration: none; }
.vsi-pagina img { max-width: 100%; display: block; }

.vsi-pagina h1,
.vsi-pagina h2,
.vsi-pagina h3 {
  font-family: var(--vsi-fonte);
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
  color: var(--vsi-texto);
}
.vsi-pagina h1 { font-size: 32px; letter-spacing: -0.8px; }
.vsi-pagina h2 { font-size: 19px; }
.vsi-pagina h3 { font-size: 17px; }

.vsi-pagina p { margin: 0 0 12px; }

.vsi-num { font-variant-numeric: tabular-nums; }

.vsi-pagina :focus-visible {
  outline: 2px solid var(--vsi-dourado);
  outline-offset: 2px;
}

/* ==========================================================================
   CABEÇALHO DA PÁGINA
   ========================================================================== */

.vsi-rotulo {
  font-size: 12px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--vsi-dourado);
  margin-bottom: 10px;
}
.vsi-linha-fina {
  font-size: 17px; color: var(--vsi-texto-2);
  margin: 14px 0 0; max-width: 62ch;
}
.vsi-bloco { margin-top: 48px; }
.vsi-bloco__titulo {
  font-size: 13px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: var(--vsi-texto-3);
  padding-bottom: 10px; border-bottom: 1px solid var(--vsi-borda);
  margin-bottom: 22px;
}

/* ==========================================================================
   BOTÕES
   ========================================================================== */

.vsi-bt {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--vsi-fonte); font-size: 15px; font-weight: 600;
  padding: 12px 24px; border: 1px solid transparent; border-radius: var(--vsi-r-sm);
  cursor: pointer; text-decoration: none;
  transition: background var(--vsi-mov-rapido) var(--vsi-curva),
              border-color var(--vsi-mov-rapido) var(--vsi-curva),
              transform var(--vsi-mov-rapido) var(--vsi-curva);
}
.vsi-bt:active { transform: translateY(1px); }
.vsi-bt--principal { background: var(--vsi-dourado); color: var(--vsi-azul); }
.vsi-bt--principal:hover { background: var(--vsi-dourado-escuro); }
.vsi-bt--escuro { background: var(--vsi-azul); color: var(--vsi-branco); }
.vsi-bt--escuro:hover { background: var(--vsi-azul-claro); }
.vsi-bt--vazio { background: transparent; border-color: var(--vsi-borda-forte); color: var(--vsi-texto); }
.vsi-bt--vazio:hover { border-color: var(--vsi-texto-2); }
.vsi-bt--zap { background: var(--vsi-whatsapp); color: #04310f; }
.vsi-bt--zap:hover { filter: brightness(1.06); }
.vsi-bt--bloco { width: 100%; }

/* ==========================================================================
   SELOS — confiança, não marketing
   ========================================================================== */

.vsi-selo {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; padding: 3px 9px;
  border-radius: var(--vsi-r-sm); white-space: nowrap;
}
.vsi-selo--verificado { color: var(--vsi-sucesso); background: rgba(26, 127, 55, 0.10); }
.vsi-selo--etiqueta   { color: #6b5200; background: var(--vsi-dourado-claro); }
.vsi-selo--novo       { color: var(--vsi-branco); background: var(--vsi-azul); }

/* ==========================================================================
   A COMISSÃO, EM NÚMERO
   ========================================================================== */

.vsi-comissao {
  background: var(--vsi-azul); color: #fff;
  border-radius: var(--vsi-r-lg); padding: 32px;
  display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center;
}
.vsi-comissao__num {
  font-size: 52px; font-weight: 700; color: var(--vsi-dourado);
  font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -2px;
}
.vsi-comissao__legenda { font-size: 13px; color: rgba(255,255,255,.5); margin-top: 6px; }
.vsi-comissao__txt { font-size: 15px; color: rgba(255,255,255,.72); max-width: 56ch; }
.vsi-comissao__txt b { color: #fff; }

/* ==========================================================================
   OS DOIS CAMINHOS
   ========================================================================== */

.vsi-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.vsi-caminho {
  background: #fff; border: 1px solid var(--vsi-borda);
  border-radius: var(--vsi-r-lg); padding: 28px;
}
.vsi-caminho__quem {
  font-size: 12px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: var(--vsi-texto-3); margin-bottom: 6px;
}
.vsi-caminho h2 { margin-bottom: 20px; }

.vsi-passos { list-style: none; padding: 0; margin: 0; counter-reset: p; }
.vsi-passos li {
  counter-increment: p; position: relative;
  padding: 0 0 18px 40px; font-size: 15px; color: var(--vsi-texto-2);
}
.vsi-passos li:last-child { padding-bottom: 0; }
.vsi-passos li::before {
  content: counter(p);
  position: absolute; left: 0; top: -1px;
  width: 26px; height: 26px; border-radius: var(--vsi-r-full);
  background: var(--vsi-fundo); color: var(--vsi-texto);
  display: grid; place-items: center; font-size: 13px; font-weight: 600;
}
.vsi-passos li b { color: var(--vsi-texto); font-weight: 600; }

/* ==========================================================================
   VERIFICAÇÃO
   ========================================================================== */

.vsi-verificacao {
  background: #fff; border: 1px solid var(--vsi-borda);
  border-left: 4px solid var(--vsi-sucesso);
  border-radius: var(--vsi-r-lg); padding: 28px;
}
.vsi-verificacao--dourada { border-left-color: var(--vsi-dourado); }
.vsi-verificacao h2 { margin-bottom: 12px; }
.vsi-verificacao p { font-size: 15px; color: var(--vsi-texto-2); max-width: 74ch; }
.vsi-verificacao p:last-child { margin-bottom: 0; }

/* ==========================================================================
   PLANOS
   ========================================================================== */

.vsi-planos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.vsi-plano {
  background: #fff; border: 1px solid var(--vsi-borda);
  border-radius: var(--vsi-r-lg); padding: 24px;
  display: flex; flex-direction: column; gap: 6px;
}
.vsi-plano--destaque { border-color: var(--vsi-dourado); border-width: 2px; }
.vsi-plano__nome { font-size: 15px; font-weight: 600; }
.vsi-plano__preco {
  font-size: 26px; font-weight: 700; letter-spacing: -0.6px;
  font-variant-numeric: tabular-nums;
}
.vsi-plano__preco small { font-size: 13px; font-weight: 400; color: var(--vsi-texto-3); letter-spacing: 0; }
.vsi-plano__lista {
  list-style: none; padding: 0; margin: 14px 0 20px;
  font-size: 14px; color: var(--vsi-texto-2); line-height: 1.9;
}
.vsi-plano__lista li::before { content: "—"; color: var(--vsi-texto-off); margin-right: 8px; }
.vsi-plano .vsi-bt { margin-top: auto; }

/* ==========================================================================
   CAIXA DO PLANO FREE
   ========================================================================== */

.vsi-gratis {
  background: var(--vsi-dourado-claro);
  border: 1px solid rgba(196,160,0,.35);
  border-radius: var(--vsi-r-lg); padding: 28px;
}
.vsi-gratis h2 { margin-bottom: 10px; }
.vsi-gratis p { font-size: 15px; color: #5c4a00; max-width: 72ch; margin: 0; }

/* ==========================================================================
   LIMITES
   ========================================================================== */

.vsi-limites {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px;
}
.vsi-limites li {
  background: #fff; border: 1px solid var(--vsi-borda);
  border-radius: var(--vsi-r-md); padding: 16px 18px;
  font-size: 14px; color: var(--vsi-texto-2);
}
.vsi-limites li b { display: block; color: var(--vsi-texto); font-weight: 600; margin-bottom: 3px; }

/* ==========================================================================
   FIM DA PÁGINA
   ========================================================================== */

.vsi-fim { margin-top: 48px; text-align: center; }
.vsi-fim h2 { font-size: 22px; margin-bottom: 8px; }
.vsi-fim p { color: var(--vsi-texto-2); margin: 0 0 22px; }
.vsi-fim__bt { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   GRADE E CARD DO IMÓVEL
   --------------------------------------------------------------------------
   O componente que decide o clique. A ordem da informação é sempre a mesma:
   foto -> preço -> custos -> título -> medida -> bairro -> confiança.
   ========================================================================== */

.vsi-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 16px;
}

.vsi-card {
  background: #fff;
  border: 1px solid var(--vsi-borda);
  border-radius: var(--vsi-r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow var(--vsi-mov-rapido) var(--vsi-curva),
              transform var(--vsi-mov-rapido) var(--vsi-curva);
}
.vsi-card:hover { box-shadow: var(--vsi-sombra-3); transform: translateY(-2px); }

/* Foto: proporção fixa e espaço reservado (é o que zera o CLS) */
.vsi-card__foto {
  position: relative; aspect-ratio: 4 / 3;
  background: var(--vsi-fundo); overflow: hidden;
}
.vsi-card__foto img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 320ms var(--vsi-curva);
}
.vsi-card:hover .vsi-card__foto img { transform: scale(1.03); }

.vsi-card__semfoto {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #eef1f4 0%, #dfe4ea 100%);
  color: var(--vsi-texto-off);
  font-size: 12px; letter-spacing: .5px; text-transform: uppercase;
}

.vsi-card__fav {
  position: absolute; top: 10px; right: 10px;
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 0; border-radius: var(--vsi-r-full);
  background: rgba(255,255,255,.92); color: var(--vsi-texto-3);
  font-size: 18px; cursor: pointer; line-height: 1;
  transition: color var(--vsi-mov-rapido) var(--vsi-curva);
}
.vsi-card__fav:hover, .vsi-card__fav[aria-pressed="true"] { color: var(--vsi-dourado); }

.vsi-card__corpo {
  padding: 16px; display: flex; flex-direction: column;
  gap: 8px; flex: 1;
}

.vsi-card__preco {
  font-size: 22px; font-weight: 700; letter-spacing: -0.4px;
  font-variant-numeric: tabular-nums; color: var(--vsi-texto);
}
.vsi-card__preco small {
  font-size: 13px; font-weight: 400; color: var(--vsi-texto-3); letter-spacing: 0;
}

.vsi-card__custos { font-size: 13px; color: var(--vsi-texto-3); }

.vsi-card__titulo {
  font-size: 16px; font-weight: 400; line-height: 1.35; color: var(--vsi-texto);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.vsi-card__ficha {
  font-size: 14px; color: var(--vsi-texto-2);
  display: flex; flex-wrap: wrap; gap: 4px 8px;
}
.vsi-card__ficha span + span::before {
  content: "·"; margin-right: 8px; color: var(--vsi-texto-off);
}

.vsi-card__local { font-size: 14px; color: var(--vsi-texto-2); margin-top: auto; }

.vsi-card__confianca {
  border-top: 1px solid var(--vsi-borda);
  padding: 10px 16px;
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--vsi-texto-3);
}

/* ==========================================================================
   BAIRRO — o ativo que portal grande não tem
   ========================================================================== */

.vsi-bairro-card {
  background: #fff; border: 1px solid var(--vsi-borda);
  border-radius: var(--vsi-r-lg); padding: 16px;
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color var(--vsi-mov-rapido) var(--vsi-curva);
}
.vsi-bairro-card:hover { border-color: var(--vsi-dourado); }
.vsi-bairro-card__nome { font-size: 16px; font-weight: 600; color: var(--vsi-texto); }
.vsi-bairro-card__conta { font-size: 13px; color: var(--vsi-texto-2); }
.vsi-bairro-card__faixa {
  font-size: 13px; color: var(--vsi-texto-3); font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   VAZIO, CARREGANDO E CHIPS
   ========================================================================== */

.vsi-vazio { text-align: center; padding: 56px 24px; color: var(--vsi-texto-2); }
.vsi-vazio__titulo { font-size: 18px; font-weight: 600; color: var(--vsi-texto); margin-bottom: 8px; }

@keyframes vsi-pulsa { 50% { opacity: .5; } }
.vsi-fantasma {
  background: rgba(10, 22, 40, .07); border-radius: var(--vsi-r-sm);
  animation: vsi-pulsa 1.4s ease-in-out infinite;
}
.vsi-fantasma--foto { aspect-ratio: 4 / 3; border-radius: 0; }
.vsi-fantasma--linha { height: 14px; margin: 8px 16px; }

.vsi-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vsi-chip {
  font-family: var(--vsi-fonte); font-size: 14px; color: var(--vsi-texto-2);
  background: #fff; border: 1px solid var(--vsi-borda);
  border-radius: var(--vsi-r-full); padding: 7px 16px; cursor: pointer;
  transition: border-color var(--vsi-mov-rapido) var(--vsi-curva),
              color var(--vsi-mov-rapido) var(--vsi-curva);
}
.vsi-chip:hover { border-color: var(--vsi-borda-forte); color: var(--vsi-texto); }
.vsi-chip[aria-pressed="true"] { border-color: var(--vsi-texto); color: var(--vsi-texto); font-weight: 600; }

.vsi-progresso { height: 2px; background: var(--vsi-dourado); width: 0; transition: width 200ms var(--vsi-curva); }
.vsi-progresso[data-ativo="1"] { width: 100%; }

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */

@media (max-width: 980px) {
  .vsi-planos { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 780px) {
  .vsi-duas { grid-template-columns: 1fr; }
  .vsi-comissao { grid-template-columns: 1fr; gap: 20px; }
  .vsi-comissao__num { font-size: 42px; }
  .vsi-pagina h1 { font-size: 26px; }
}

@media (max-width: 560px) {
  .vsi-planos { grid-template-columns: 1fr; }
  .vsi-caminho { padding: 22px; }
  .vsi-comissao { padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .vsi-pagina * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}