/* =========================================================
   VDC IMÓVEIS — Design Tokens
   v1.0 · agosto/2026
   Cole este arquivo em qualquer projeto e use as variáveis.
   Fontes: https://fonts.googleapis.com/css2?family=Archivo:wght@600;700&family=Hanken+Grotesk:wght@400;600;700&family=IBM+Plex+Mono:wght@500&display=swap

   Este arquivo é a cópia literal do sistema de identidade visual da
   marca (ver ../../../Identidade Visual/DESIGN.md) — não é específico
   deste site. NÃO altere valores aqui achando que é só deste projeto;
   qualquer mudança de cor/tipografia/espaçamento deve nascer no
   DESIGN.md e ser replicada aqui. O style.css deste site (uma pasta
   acima) é quem usa essas variáveis para montar os componentes da home.

   Duas partes:
   1. :root         → variáveis (cor, fonte, espaçamento, sombra, raio, movimento)
   2. .vdc-*        → classes utilitárias prontas (texto, botão, card, input...)
   ========================================================= */

:root {
  /* ---- Cor: navy (marca) — cor-mãe da VDC, usada em títulos,
     botões primários e fundos institucionais escuros ---- */
  --vdc-navy-900: #152B43;
  --vdc-navy-700: #283B62;   /* cor-mãe */
  --vdc-navy-500: #5272B2;
  --vdc-navy-300: #8FA3C8;
  --vdc-navy-100: #E7ECF5;

  /* ---- Cor: dourado e areia — cor de destaque (preço, selos, fio
     sob título). Regra da marca: no máximo 10% da área de cada peça,
     e nunca como texto pequeno sobre fundo branco (contraste baixo). ---- */
  --vdc-gold-300: #F2D376;
  --vdc-gold-500: #C9A44E;
  --vdc-gold-700: #8F7534;
  --vdc-sand-400: #CBB492;
  --vdc-sand-100: #F5EFE6;

  /* ---- Neutros ---- */
  --vdc-white:     #FFFFFF;
  --vdc-off-white: #F7F8FA;
  --vdc-gray-400:  #C9CED8;
  --vdc-gray-600:  #616E89;
  --vdc-ink:       #1A1F2B;

  /* ---- Funcionais ---- */
  --vdc-success:  #1F7A4C;
  --vdc-alert:    #B4472E;
  --vdc-whatsapp: #25D366;

  /* ---- Gradientes ---- */
  --vdc-metal: linear-gradient(135deg,#8F7534 0%,#C9A44E 35%,#F2D376 55%,#C9A44E 78%,#8F7534 100%);
  --vdc-veil:  linear-gradient(180deg,rgba(21,43,67,0) 0%,rgba(21,43,67,.85) 100%);
  --vdc-instagram-gradient: linear-gradient(45deg,#FEDA75,#FA7E1E,#D62976,#962FBF,#4F5BD5);
  /* Gradiente tonal: 2 tons da mesma cor, 160°, sem pico de brilho —
     pras superfícies que hoje são uma cor chapada só (botão, faixa,
     rodapé). Mesma lógica já usada nas capas de card de imóvel. */
  --vdc-navy-gradient: linear-gradient(160deg, var(--vdc-navy-700), var(--vdc-navy-900));
  --vdc-gold-gradient: linear-gradient(160deg, var(--vdc-gold-700), var(--vdc-gold-500));
  --vdc-sand-gradient: linear-gradient(160deg, var(--vdc-sand-400), var(--vdc-sand-100));

  /* ---- Tipografia ---- */
  --vdc-font-display: "Archivo","Arial Black",Arial,sans-serif;
  --vdc-font-body:    "Hanken Grotesk","Segoe UI",Arial,sans-serif;
  --vdc-font-data:    "IBM Plex Mono",Consolas,"Courier New",monospace;

  --vdc-size-display: 61px;
  --vdc-size-h1: 49px;
  --vdc-size-h2: 39px;
  --vdc-size-h3: 31px;
  --vdc-size-h4: 25px;
  --vdc-size-lead: 19px;
  --vdc-size-body: 16px;
  --vdc-size-small: 14px;
  --vdc-size-eyebrow: 13px;
  --vdc-size-caption: 12px;

  /* ---- Espaçamento (base 4) — só usar valores desta escala.
     Se "precisar" de 27px, arredonde pra 24 ou 32. ---- */
  --vdc-space-1: 4px;   --vdc-space-2: 8px;   --vdc-space-3: 12px;
  --vdc-space-4: 16px;  --vdc-space-5: 24px;  --vdc-space-6: 32px;
  --vdc-space-7: 48px;  --vdc-space-8: 64px;  --vdc-space-9: 96px;
  --vdc-space-10: 128px; --vdc-space-11: 160px;

  /* ---- Layout ---- */
  --vdc-max-width: 1200px;
  --vdc-gutter: 24px;

  /* ---- Forma — a marca é reta: 0 em faixas/seções, 4px em botões
     e cards, círculo total em avatar/selo. Nunca cantos de 8-24px
     (o "arredondado genérico de dashboard" está fora do sistema). ---- */
  --vdc-radius-none: 0;
  --vdc-radius-sm: 4px;
  --vdc-radius-full: 9999px;

  /* ---- Sombra ---- */
  --vdc-shadow-sm: 0 1px 2px rgba(21,43,67,.08);
  --vdc-shadow-md: 0 4px 16px rgba(21,43,67,.10);
  --vdc-shadow-lg: 0 16px 48px rgba(21,43,67,.14);

  /* ---- Movimento ---- */
  --vdc-dur-fast: 160ms;
  --vdc-dur-base: 400ms;
  --vdc-ease: cubic-bezier(.2,.8,.2,1);
}

/* Tipografia mobile (escala reduzida) */
@media (max-width: 768px) {
  :root {
    --vdc-size-display: 40px;
    --vdc-size-h1: 33px;
    --vdc-size-h2: 28px;
    --vdc-size-h3: 23px;
    --vdc-size-h4: 20px;
    --vdc-size-lead: 17px;
  }
}

/* =========================================================
   Utilitários
   ========================================================= */

.vdc-eyebrow {
  font: 600 var(--vdc-size-eyebrow)/1.2 var(--vdc-font-display);
  letter-spacing: .14em; text-transform: uppercase; color: var(--vdc-gold-500);
}
/* Gold-500 on white/off-white measures 2.4:1 (see DESIGN.md §3.5) —
   decorative-only per the brand's own contrast table, never text. Every
   .vdc-eyebrow inside a plain (non-navy) .vdc-section switches to the
   doc's own approved alternate (§4.2: "sempre em gold-500 ou navy-500").
   Eyebrows on navy/dark surfaces (hero, mega menu, footer, login) are
   unaffected and keep gold-500, where it already passes contrast. */
.vdc-section:not(.vdc-section--navy) .vdc-eyebrow { color: var(--vdc-navy-500); }
.vdc-h1 { font: 700 var(--vdc-size-h1)/1.1 var(--vdc-font-display); letter-spacing:-.02em; color: var(--vdc-navy-700); }
.vdc-h2 { font: 700 var(--vdc-size-h2)/1.15 var(--vdc-font-display); letter-spacing:-.01em; color: var(--vdc-navy-700); }
.vdc-h3 { font: 600 var(--vdc-size-h3)/1.2 var(--vdc-font-display); color: var(--vdc-navy-700); }
.vdc-body { font: 400 var(--vdc-size-body)/1.65 var(--vdc-font-body); color: var(--vdc-gray-600); max-width: 68ch; }
.vdc-data { font: 500 var(--vdc-size-h4)/1.2 var(--vdc-font-data); letter-spacing:.02em; color: var(--vdc-navy-700); }
.vdc-caption {
  font: 500 var(--vdc-size-caption)/1.4 var(--vdc-font-data);
  letter-spacing:.1em; text-transform: uppercase; color: var(--vdc-gray-600);
}


/* Botões */
.vdc-btn {
  display:inline-flex; align-items:center; justify-content:center;
  height:48px; padding:0 var(--vdc-space-6); border:0; cursor:pointer;
  border-radius: var(--vdc-radius-full);
  font:600 15px/1 var(--vdc-font-display); letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; transition: transform var(--vdc-dur-fast) var(--vdc-ease),
                                    background var(--vdc-dur-fast) var(--vdc-ease);
}
.vdc-btn:hover { transform: translateY(-1px); filter: brightness(.92); }
.vdc-btn:focus-visible { outline:2px solid var(--vdc-gold-500); outline-offset:2px; }
.vdc-btn--primary   { background: var(--vdc-navy-gradient); color:#fff; }
.vdc-btn--secondary { background: transparent; color: var(--vdc-navy-700); box-shadow: inset 0 0 0 1.5px var(--vdc-navy-700); }
/* Same tonal-gradient system (2 stops, 160°, no bright peak), shifted to
   the lighter half of the gold ramp: gold-700 (the shared --vdc-gold-gradient's
   dark stop) measures only ~3.3:1 against navy-900 text — below the 4.5:1
   floor. gold-500 and gold-300 both independently clear 4.5:1+, so neither
   end of this button-specific gradient can dip below it. */
.vdc-btn--gold      { background: linear-gradient(160deg, var(--vdc-gold-500), var(--vdc-gold-300)); color: var(--vdc-navy-900); } /* um por tela */
.vdc-btn--whatsapp  { background: var(--vdc-whatsapp); color: var(--vdc-navy-900); } /* branco sobre #25D366 media 2.0:1 — abaixo do piso; a cor do texto não é a marca de terceiro, só o fundo é */

/* Card de imóvel — layout horizontal (foto à esquerda, dados à
   direita); align-items:stretch (padrão do flex) faz a foto acompanhar
   a altura do conteúdo, sem precisar de aspect-ratio fixo. Volta a
   empilhar vertical no celular (ver media query mais abaixo). */
.vdc-card {
  display: flex; background:#fff; border:1px solid var(--vdc-gray-400);
  border-radius: var(--vdc-radius-sm); box-shadow: var(--vdc-shadow-sm); overflow:hidden;
  transition: box-shadow var(--vdc-dur-fast) var(--vdc-ease),
              border-color var(--vdc-dur-fast) var(--vdc-ease),
              transform var(--vdc-dur-fast) var(--vdc-ease);
}
.vdc-card:hover { box-shadow: var(--vdc-shadow-md); border-color: var(--vdc-gold-500); transform: translateY(-2px); }
@media (max-width: 640px) { .vdc-card { flex-direction: column; } }

/* Chip de status */
.vdc-chip {
  display:inline-block; padding:6px 12px; background: var(--vdc-navy-700); color:#fff;
  border-radius: var(--vdc-radius-sm);
  font:600 12px/1 var(--vdc-font-display); letter-spacing:.1em; text-transform:uppercase;
}

/* Selo de credencial */
.vdc-seal {
  display:grid; place-items:center; width:96px; height:96px; text-align:center;
  border-radius: var(--vdc-radius-full); background: var(--vdc-navy-gradient);
  box-shadow: inset 0 0 0 1.5px var(--vdc-gold-500);
  color:#fff; font:500 11px/1.3 var(--vdc-font-data); letter-spacing:.08em; text-transform:uppercase;
  padding: var(--vdc-space-3);
}

/* Campo de formulário */
.vdc-input {
  width:100%; height:48px; padding:0 var(--vdc-space-4);
  border:1px solid var(--vdc-gray-400); border-radius: var(--vdc-radius-sm);
  font:400 16px var(--vdc-font-body); color: var(--vdc-ink); background:#fff;
}
.vdc-input:focus { outline:none; border-color: var(--vdc-navy-500); box-shadow:0 0 0 2px var(--vdc-gold-500); }

/* Foto com máscara em arco (assinatura da marca) */
.vdc-arc { border-radius: var(--vdc-radius-full); overflow:hidden; }
.vdc-arc-corner { border-radius: 0 0 0 100%; overflow:hidden; }

/* Seção */
.vdc-section { padding: var(--vdc-space-9) var(--vdc-space-5); }
.vdc-section--navy { background: var(--vdc-navy-700); color:#fff; }
.vdc-section--navy .vdc-h2, .vdc-section--navy .vdc-h3 { color:#fff; }
.vdc-section--navy .vdc-body { color: var(--vdc-navy-100); }
.vdc-container { max-width: var(--vdc-max-width); margin-inline:auto; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}