/* ═══════════════════════════════════════════════════════════════════
   JARDIM.CSS — PORT FORENSE do capítulo VIII da apresentação AL'DORA VISTA
   (cap-viii-sub.css + cap-foto-hero + classes base), 1:1, escopado em
   .jardim-sub pra não afetar o resto do site. Usado nas subpáginas dos
   Jardins (Barcelona · Roma · Gênova · Versailles).
   Hero um pouco MAIOR que o book (88vh vs 84vh) — pedido do cliente.
   ═══════════════════════════════════════════════════════════════════ */

/* ---- BLINDAGEM: as tokens da apresentação também no :root (fallback global) ----
   Por que: os seletores .vista-quadras/.vquadra são globais mas usam var(--space-*/--type-*).
   Antes, essas tokens só existiam dentro de .jardim-sub — se um bake saísse sem o wrapper,
   a seção inteira colapsava (padding/gap/font viram inválidos). Como este arquivo só carrega
   nas páginas AL'DORA Vista / Jardins, definir no :root aqui é seguro e não afeta o resto. */
:root {
  --container: 1200px;
  --max-text: 65ch;
  --space-xs: 16px; --space-sm: 24px; --space-md: 32px; --space-lg: 48px;
  --space-xl: 64px; --space-xxl: 96px; --space-super: 128px;
  --space-section-h: clamp(24px, 5vw, 96px);
  --type-11: 11px; --type-12: 12px; --type-13: 13px; --type-14: 14px;
  --type-16: 16px; --type-18: 18px; --type-20: 20px; --type-24: 24px;
  --type-26: 26px; --type-28: 28px; --type-32: 32px; --type-36: 36px;
  --type-40: 40px; --type-56: 56px; --type-80: 80px;
  --font-sans: var(--sans); --font-display: var(--sans);
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;   /* faltava; --font-mono dependia dela */
  --font-mono: var(--mono);
  --dur-base: 200ms; --dur-cinema: 900ms;
}

/* ---- Tokens da apresentação que o site não tinha (escopados) ---- */
.jardim-sub {
  --container: 1200px;
  --max-text: 65ch;
  --space-xs: 16px; --space-sm: 24px; --space-md: 32px; --space-lg: 48px;
  --space-xl: 64px; --space-xxl: 96px; --space-super: 128px;
  --space-section-h: clamp(24px, 5vw, 96px);
  --type-11: 11px; --type-12: 12px; --type-13: 13px; --type-14: 14px;
  --type-16: 16px; --type-18: 18px; --type-20: 20px; --type-24: 24px;
  --type-26: 26px; --type-28: 28px; --type-32: 32px; --type-36: 36px;
  --type-40: 40px; --type-56: 56px; --type-80: 80px;
  --font-sans: var(--sans); --font-display: var(--sans); --font-mono: var(--mono);
  --dur-base: 200ms; --dur-cinema: 900ms;
  background: var(--cream);
  color: var(--text-primary-light);
  overflow: clip;
  display: block;
  padding: 0;   /* zera o padding-block global de <section> — o VIII controla o próprio ritmo */
}
.jardim-sub .jsub-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-section-h);
}
/* Ritmo vertical entre as seções de conteúdo. As .jsub-inner "puras" (visão geral do
   AL'DORA Vista) empilhavam coladas (padding-block 0). As seções COM modificador
   (intro/galeria/amenities/números/loc/fatos/marcas) já têm padding-block próprio → resetam
   a margem, senão o espaço dobra (regressão nos Jardins: 128+margem+128). */
.jardim-sub > .jsub-inner + .jsub-inner { margin-top: clamp(72px, 9vw, 132px); }
.jardim-sub > .jsub-inner.jsub-intro,
.jardim-sub > .jsub-inner.jsub-galeria,
.jardim-sub > .jsub-inner.jsub-amenities,
.jardim-sub > .jsub-inner.jsub-numeros,
.jardim-sub > .jsub-inner.jsub-loc,
.jardim-sub > .jsub-inner.jsub-fatos,
.jardim-sub > .jsub-inner.jsub-marcas { margin-top: 0; }
@media (max-width: 768px) { .jardim-sub .jsub-inner { padding-inline: var(--space-md); } }

/* ---- Classes base tipográficas (escopadas — não tocam o resto do site) ---- */
.jardim-sub .display {
  font-family: var(--font-display); font-weight: 500; font-size: var(--type-56);
  line-height: 1.1; letter-spacing: -1.12px; font-variation-settings: "wght" 500, "opsz" 56;
}
.jardim-sub .display-lg {
  font-family: var(--font-display); font-weight: 500; font-size: var(--type-36);
  line-height: 1.2; letter-spacing: -0.36px; font-variation-settings: "wght" 500, "opsz" 36;
}
.jardim-sub .body {
  font-family: var(--font-sans); font-weight: 400; font-size: var(--type-16);
  line-height: 1.7; letter-spacing: 0; max-width: var(--max-text);
  color: var(--text-primary-light); hyphens: none; -webkit-hyphens: none; overflow-wrap: normal;
}
.jardim-sub .body p + p { margin-top: 1.3em; }
.jardim-sub .caption {
  font-family: var(--font-sans); font-weight: 400; font-size: var(--type-12);
  line-height: 1.4; letter-spacing: 0;
}
.jardim-sub .eyebrow {
  font-family: var(--font-sans); font-weight: 600; font-size: var(--type-11);
  line-height: 1.4; letter-spacing: 1.1px; text-transform: uppercase; display: inline-block;
}
.jardim-sub .folio {
  display: block; text-align: center;
  padding: var(--space-lg) 0 var(--space-super);
  font-family: var(--font-sans); font-weight: 600; font-size: var(--type-11);
  line-height: 1.4; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-faint-light);
}

/* ---- .cap-foto-hero (tratamento de foto sob texto — vinheta + spotlight) ---- */
.jardim-sub .cap-foto-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--dark); }
.jardim-sub .cap-foto-hero .hero-bg {
  position: absolute; inset: 0; z-index: 0; display: block; margin: 0;
  transform: translate3d(0, var(--parallax-y, 0px), 0);
}
.jardim-sub .cap-foto-hero .hero-bg img { width: 100%; height: 110%; object-fit: cover; object-position: center 35%; display: block; }
.jardim-sub .cap-foto-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse at 35% 50%, transparent 0%, rgba(13,17,23,0.50) 95%),
    linear-gradient(180deg, rgba(13,17,23,0.55) 0%, rgba(13,17,23,0.35) 30%, rgba(13,17,23,0.45) 70%, rgba(13,17,23,0.75) 100%);
}
.jardim-sub .cap-foto-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, rgba(13,17,23,0.55) 0%, rgba(13,17,23,0.35) 30%, transparent 60%);
}
.jardim-sub .cap-foto-hero > *:not(.hero-bg) { position: relative; z-index: 3; }

/* ---- 1 · HERO (min-height MAIOR: 88vh) ---- */
.jsub-hero { min-height: 88vh; min-height: 88svh; display: flex; align-items: flex-end; }
.jsub-hero__title { width: 100%; max-width: var(--container); margin-inline: auto; padding: var(--space-xxl) var(--space-section-h) var(--space-xl); }
.jsub-hero__selo { display: inline-flex; gap: var(--space-sm); margin-top: var(--space-sm); color: rgba(244, 239, 228, 0.62); }
.jsub-hero__title .display { margin-top: 0.15em; }
@media (max-width: 768px) { .jsub-hero__title { padding: var(--space-xl) var(--space-md) var(--space-lg); } }

/* ---- 2 · INTRO editorial (assimétrico: tese esquerda + fatos direita) ---- */
.jsub-intro { padding-block: var(--space-super) var(--space-xxl); }
.jsub-intro .body { max-width: var(--max-text); }
.jsub-intro:has(.jsub-fatos) { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--space-xxl); align-items: start; }
.jsub-intro:has(.jsub-fatos) .body { max-width: 32em; font-size: var(--type-20); line-height: 1.62; color: var(--text-primary-light); }
.jsub-intro:has(.jsub-fatos) .body::before { content: ""; display: block; width: 46px; height: 2px; background: var(--gold); margin-bottom: var(--space-md); }
.jsub-intro:has(.jsub-fatos) .body p + p { margin-top: 0.85em; }
.jsub-fatos { display: flex; flex-direction: column; gap: 0; margin-top: 0.35em; color: var(--text-secondary-light); border-top: 1px solid rgba(176, 141, 79, 0.35); }
.jsub-fatos > span { display: flex; align-items: baseline; gap: 0.6em; padding: 0.72em 0; border-bottom: 1px solid rgba(24, 24, 24, 0.09); font-size: var(--type-16); letter-spacing: 0.01em; }
.jsub-fatos > span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); flex: none; align-self: center; }
@media (max-width: 900px) { .jsub-intro:has(.jsub-fatos) { grid-template-columns: 1fr; gap: var(--space-lg); } .jsub-intro:has(.jsub-fatos) .body { max-width: var(--max-text); } }

/* Versailles: pull-quote teal como lead + corpo secundário */
.jardim-sub .pull-quote { font-family: var(--font-sans); font-style: normal; font-weight: 400; font-size: var(--type-24); line-height: 1.45; letter-spacing: -0.32px; max-width: 36em; text-wrap: balance; }
.jsub-intro:has(.pull-quote) { display: block; }
.jsub-intro:has(.pull-quote) .pull-quote { font-size: var(--type-28); line-height: 1.4; max-width: 20em; margin-bottom: var(--space-lg); color: var(--teal); }
.jsub-intro:has(.pull-quote) .body { color: var(--text-secondary-light); }

/* eyebrow de seção com tick à esquerda */
.jardim-sub .jsub-inner > .eyebrow { display: inline-flex; align-items: center; gap: 0.7em; }
.jardim-sub .jsub-inner > .eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: 0.5; flex: none; }

/* ---- 4 · GALERIA — mosaico assimétrico ---- */
.jsub-galeria { padding-block: var(--space-super); }
.jsub-galeria__grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: clamp(148px, 18.5vw, 248px); grid-auto-flow: row dense; gap: var(--space-sm); }
.jsub-galeria__grid > a.jsub-shot { grid-column: span 2; }
.jsub-galeria__grid > a.jsub-shot:nth-child(4n+2), .jsub-galeria__grid > a.jsub-shot:nth-child(4n+5) { grid-column: span 3; }
.jsub-galeria__grid > a.jsub-shot:first-child { grid-column: 1 / -1; grid-row: span 2; }
.jsub-galeria__grid > a.jsub-shot:last-child:nth-child(even) { grid-column: 1 / -1; }
.jsub-galeria__grid > a.jsub-shot { display: block; overflow: clip; cursor: zoom-in; background: #0d1117; }
.jsub-galeria__grid > a.jsub-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-cinema) var(--ease-out-soft); }
.jsub-galeria__grid > a.jsub-shot:hover img { transform: scale(1.04); }
@media (max-width: 768px) { .jsub-galeria__grid { grid-template-columns: 1fr; grid-auto-rows: auto; } .jsub-galeria__grid > a.jsub-shot, .jsub-galeria__grid > a.jsub-shot:first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 3 / 2; } }

/* ---- AMENITIES (ícones thin + label, agrupado) ---- */
.jsub-amenities { padding-block: var(--space-super); }
.jsub-amen-group { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid rgba(176, 141, 79, 0.28); display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 3.15fr); gap: var(--space-md) var(--space-xxl); align-items: start; }
.jsub-amen-group__label { color: var(--gold); align-self: start; padding-top: 0.15em; }
.jsub-amen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-lg); }
.jsub-amen { display: flex; align-items: center; gap: var(--space-md); }
.jsub-amen__ic { width: 60px; height: 60px; flex: none; color: var(--teal); stroke-width: 1.1; }
.jsub-amen span { font-size: var(--type-16); line-height: 1.4; color: var(--text-secondary-light); }
@media (max-width: 768px) { .jsub-amen-group { grid-template-columns: 1fr; gap: var(--space-md); } .jsub-amen-grid { grid-template-columns: 1fr 1fr; gap: var(--space-lg) var(--space-md); } .jsub-amen__ic { width: 48px; height: 48px; } }

/* ---- 8 · NÚMEROS (flutuando no cream, sem card) ---- */
.jsub-numeros { padding-block: var(--space-super); }
.jsub-numeros__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--space-lg); margin-top: var(--space-xl); align-items: start; max-width: 820px; }
.jsub-numeros__grid:has(> div:nth-child(4):last-child), .jsub-numeros__grid:has(> div:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 620px; }
.jsub-num__valor { display: block; font-family: var(--font-sans); font-weight: 700; font-size: var(--type-40); line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--text-primary-light); white-space: nowrap; }
.jsub-num__unit { font-size: var(--type-20); font-weight: 500; letter-spacing: 0; color: var(--text-muted-light); margin-left: 0.1em; }
.jsub-num__label { display: block; margin-top: var(--space-sm); color: var(--text-muted-light); font-size: var(--type-13); letter-spacing: 0.02em; }
@media (max-width: 768px) { .jsub-numeros__grid { grid-template-columns: 1fr 1fr; } .jsub-num__valor { font-size: var(--type-32); } .jsub-num__unit { font-size: var(--type-16); } }

/* ---- 9 · LOCALIZAÇÃO (card flutuante) ---- */
.jsub-loc { padding-block: var(--space-super); text-align: center; }
.jsub-loc .body { max-width: 46em; margin-inline: auto; }
.jsub-loc__map { margin-top: var(--space-xl); }
.jsub-loc__map img { width: 100%; max-width: 980px; margin-inline: auto; display: block; border-radius: 6px; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 24px 64px -24px rgba(0,0,0,0.35); cursor: zoom-in; }
/* mapa de localização geográfica (onde fica) — embed leve, moldura igual à do masterplan */
.jsub-loc__coord { margin-top: var(--space-sm); color: var(--text-muted-light); }
.jsub-loc__geo { max-width: 980px; margin: var(--space-xl) auto 0; }
.jsub-loc__geo iframe { width: 100%; aspect-ratio: 16 / 8; display: block; border: 1px solid rgba(0,0,0,0.08); border-radius: 6px; box-shadow: 0 24px 64px -24px rgba(0,0,0,0.35); }
.jsub-loc__map { margin-top: var(--space-lg); }

/* ---- 3/5 · FAIXA DE DESTAQUE (banner + frase) — usada no Versailles ---- */
.jsub-band { position: relative; min-height: 490px; display: flex; align-items: center; justify-content: center; text-align: center; isolation: isolate; overflow: clip; }
.jsub-band__frase { position: relative; z-index: 2; max-width: 54rem; margin-inline: auto; padding: 0 var(--space-section-h); text-align: center; text-wrap: balance; color: var(--text-primary-dark); }
@media (max-width: 768px) { .jsub-band__frase { padding: 0 var(--space-md); } }

/* ---- 10 · FECHAMENTO cinematográfico (auroras animadas por empreendimento) ---- */
.jsub-close { position: relative; min-height: clamp(360px, 52vh, 560px); display: flex; align-items: center; justify-content: center; text-align: center; isolation: isolate; overflow: clip; background: #0c1114; }
.jsub-close__aura { position: absolute; inset: -40%; z-index: 0; filter: blur(10px); mix-blend-mode: screen; }
.jsub-close__aura--1 { animation: jsubAura1 22s ease-in-out infinite alternate; }
.jsub-close__aura--2 { animation: jsubAura2 27s ease-in-out infinite alternate; }
.jsub-close__aura--3 { animation: jsubAura3 19s ease-in-out infinite alternate; }
.jsub-close::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at 50% 58%, transparent 18%, rgba(13, 17, 23, 0.42) 100%); }
/* ── Close por PRODUTO AL'DORA Vista — cor do DESIGN SYSTEM de cada quadra ──
   Vista=teal #245F73 · Essenza=copper #A25015 · Reserva=vinho #7A2626 · Jardim=oliva #727D71.
   Aura dominante na cor do produto + profundidade (vinheta) + moldura fina tingida. */
.jsub-close--vista, .jsub-close--essenza, .jsub-close--reserva, .jsub-close--jardim { background: #0b1013; }
.jsub-close--vista::after, .jsub-close--essenza::after, .jsub-close--reserva::after, .jsub-close--jardim::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(ellipse at 50% 55%, transparent 20%, rgba(9, 12, 16, 0.55) 100%);
}
.jsub-close--vista .jsub-close__frame, .jsub-close--essenza .jsub-close__frame,
.jsub-close--reserva .jsub-close__frame, .jsub-close--jardim .jsub-close__frame {
  position: absolute; inset: 14px; z-index: 2; border: 1px solid var(--close-line, rgba(244,239,228,.14)); border-radius: 4px; pointer-events: none;
}
.jsub-close--vista .jsub-close__inner, .jsub-close--essenza .jsub-close__inner,
.jsub-close--reserva .jsub-close__inner, .jsub-close--jardim .jsub-close__inner {
  text-shadow: 0 2px 22px rgba(9,12,16,.6), 0 1px 2px rgba(9,12,16,.5);
}
/* Vista · teal */
.jsub-close--vista { --close-line: rgba(123,191,212,.28); }
.jsub-close--vista .jsub-close__aura--1 { background: radial-gradient(circle at 32% 46%, #245F73 0%, transparent 56%); }
.jsub-close--vista .jsub-close__aura--2 { background: radial-gradient(circle at 71% 62%, #1b4353 0%, transparent 55%); opacity: .92; }
.jsub-close--vista .jsub-close__aura--3 { background: radial-gradient(circle at 60% 26%, #7BBFD4 0%, transparent 42%); opacity: .4; }
/* Essenza · copper */
.jsub-close--essenza { --close-line: rgba(226,147,96,.30); }
.jsub-close--essenza .jsub-close__aura--1 { background: radial-gradient(circle at 33% 48%, #A25015 0%, transparent 58%); }
.jsub-close--essenza .jsub-close__aura--2 { background: radial-gradient(circle at 72% 62%, #7a3a0f 0%, transparent 55%); opacity: .88; }
.jsub-close--essenza .jsub-close__aura--3 { background: radial-gradient(circle at 78% 20%, #E29360 0%, transparent 40%); opacity: .45; }
/* Reserva · vinho */
.jsub-close--reserva { --close-line: rgba(201,168,106,.24); }
.jsub-close--reserva .jsub-close__aura--1 { background: radial-gradient(circle at 32% 46%, #7A2626 0%, transparent 56%); }
.jsub-close--reserva .jsub-close__aura--2 { background: radial-gradient(circle at 70% 62%, #531a1a 0%, transparent 55%); opacity: .9; }
.jsub-close--reserva .jsub-close__aura--3 { background: radial-gradient(circle at 62% 26%, #C9A86A 0%, transparent 40%); opacity: .32; }
/* Jardim · oliva */
.jsub-close--jardim { --close-line: rgba(169,176,159,.26); }
.jsub-close--jardim .jsub-close__aura--1 { background: radial-gradient(circle at 32% 46%, #727D71 0%, transparent 56%); }
.jsub-close--jardim .jsub-close__aura--2 { background: radial-gradient(circle at 70% 62%, #3f4a3a 0%, transparent 55%); opacity: .9; }
.jsub-close--jardim .jsub-close__aura--3 { background: radial-gradient(circle at 60% 26%, #a9b09f 0%, transparent 42%); opacity: .4; }

.jsub-close--barcelona .jsub-close__aura--1 { background: radial-gradient(circle at 30% 40%, #245F73 0%, transparent 55%); }
.jsub-close--barcelona .jsub-close__aura--2 { background: radial-gradient(circle at 70% 65%, #2b4a3a 0%, transparent 55%); }
.jsub-close--barcelona .jsub-close__aura--3 { background: radial-gradient(circle at 55% 30%, #B08D4F 0%, transparent 45%); opacity: 0.55; }
.jsub-close--roma { background: #0d1110; }
.jsub-close--roma .jsub-close__aura--1 { background: radial-gradient(circle at 28% 45%, #245F73 0%, transparent 55%); }
.jsub-close--roma .jsub-close__aura--2 { background: radial-gradient(circle at 72% 60%, #4a5233 0%, transparent 55%); }
.jsub-close--roma .jsub-close__aura--3 { background: radial-gradient(circle at 60% 32%, #A2701C 0%, transparent 46%); opacity: 0.6; }
.jsub-close--genova .jsub-close__aura--1 { background: radial-gradient(circle at 32% 42%, #245F73 0%, transparent 55%); }
.jsub-close--genova .jsub-close__aura--2 { background: radial-gradient(circle at 70% 62%, #3a5360 0%, transparent 55%); }
.jsub-close--genova .jsub-close__aura--3 { background: radial-gradient(circle at 55% 30%, #B08D4F 0%, transparent 44%); opacity: 0.5; }
.jsub-close--versailles, .jsub-band--versailles { background: #100b04; }
.jsub-close--versailles .jsub-close__aura--1, .jsub-band--versailles .jsub-close__aura--1 { background: radial-gradient(circle at 35% 50%, #7a5a24 0%, transparent 58%); }
.jsub-close--versailles .jsub-close__aura--2, .jsub-band--versailles .jsub-close__aura--2 { background: radial-gradient(circle at 72% 64%, #A25015 0%, transparent 55%); opacity: 0.85; }
.jsub-close--versailles .jsub-close__aura--3, .jsub-band--versailles .jsub-close__aura--3 { background: radial-gradient(circle at 82% 18%, #C9A86A 0%, transparent 38%); opacity: 0.5; }
.jsub-close--versailles::after, .jsub-band--versailles::after { background: radial-gradient(ellipse at 50% 55%, transparent 18%, rgba(13, 17, 23, 0.52) 100%); }
.jsub-close--versailles .jsub-close__frame, .jsub-band--versailles .jsub-band__frame { position: absolute; inset: 14px; z-index: 2; border: 1px solid rgba(201, 168, 106, 0.5); border-radius: 4px; pointer-events: none; }
.jsub-close--versailles .jsub-close__inner, .jsub-band--versailles .jsub-band__frase { text-shadow: 0 2px 22px rgba(13, 17, 23, 0.6), 0 1px 2px rgba(13, 17, 23, 0.5); }
@keyframes jsubAura1 { from { transform: translate(-6%, -4%) scale(1.05); } to { transform: translate(5%, 6%) scale(1.15); } }
@keyframes jsubAura2 { from { transform: translate(5%, 3%) scale(1.1); } to { transform: translate(-5%, -6%) scale(1.02); } }
@keyframes jsubAura3 { from { transform: translate(-3%, 5%) scale(1); } to { transform: translate(6%, -3%) scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .jsub-close__aura { animation: none !important; } }
.jsub-close__inner { position: relative; z-index: 2; max-width: 46em; padding: var(--space-xl) var(--space-md); color: var(--text-primary-dark); }
.jsub-close__kicker { color: var(--text-secondary-dark); }
.jsub-close__nome { display: block; margin-top: var(--space-sm); color: var(--gold-hot); }
.jsub-close__cta { display: inline-block; margin-top: var(--space-xl); padding: var(--space-xs) var(--space-xl); border: 1px solid var(--text-primary-dark); color: var(--text-primary-dark); border-radius: 999px; transition: background var(--dur-base) var(--ease-out-soft), color var(--dur-base) var(--ease-out-soft); }
.jsub-close__cta:hover { background: var(--cream); color: var(--ink); }

/* ---- 6 · MARCAS DO MÉTODO (grid 3) — usado no Versailles ---- */
.jsub-marcas { padding-block: var(--space-super); }
.jsub-marcas__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); margin-top: var(--space-xl); }
.jsub-marca { padding: var(--space-lg) 0; border-top: 1px solid rgba(176, 141, 79, 0.35); }
.jsub-marca__idx { font-family: var(--font-mono); font-size: var(--type-12); color: var(--gold); letter-spacing: 0.1em; }
.jsub-marca h4 { margin-top: var(--space-sm); font-size: var(--type-18); font-weight: 700; }
.jsub-marca .body { margin-top: var(--space-xs); }
@media (max-width: 768px) { .jsub-marcas__grid { grid-template-columns: 1fr; gap: 0; } }

/* ---- 7 · FAIXA ESCURA de vídeo "O legado" (Versailles) ---- */
.jsub-dark { background: var(--dark); padding-block: var(--space-super); }
.jsub-dark .body { max-width: 40em; color: var(--text-secondary-dark); }
.jsub-dark--video { position: relative; isolation: isolate; overflow: clip; min-height: clamp(560px, 82vh, 860px); display: flex; align-items: center; padding-block: var(--space-super); background: var(--dark) center / cover no-repeat; }
.jsub-dark__video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; filter: brightness(0.92) saturate(1.03); }
.jsub-dark__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(13,17,23,0.94) 0%, rgba(13,17,23,0.74) 38%, rgba(13,17,23,0.34) 70%, rgba(13,17,23,0.52) 100%),
              linear-gradient(180deg, rgba(13,17,23,0.55) 0%, transparent 24%, transparent 72%, rgba(13,17,23,0.68) 100%); }
.jsub-dark--video .jsub-inner { position: relative; z-index: 2; }
.jsub-dark--video .eyebrow { color: var(--gold-hot); }
.jsub-dark--video .display { max-width: 15em; color: var(--cream-hero); text-shadow: 0 2px 32px rgba(13,17,23,0.72), 0 1px 3px rgba(13,17,23,0.55); }
.jsub-dark--video .body { color: rgba(244, 239, 228, 0.9); text-shadow: 0 1px 18px rgba(13,17,23,0.62); }
@media (prefers-reduced-motion: reduce) { .jsub-dark__video { display: none; } }
@media (max-width: 768px) { .jsub-dark__scrim { background: linear-gradient(180deg, rgba(13,17,23,0.55) 0%, rgba(13,17,23,0.82) 100%); } .jsub-dark--video .display { max-width: none; } }

/* ═══ AL'DORA VISTA — componentes próprios (3 quadras, foco lotes comerciais Essenza,
   mapa de disponibilidade ao vivo, faixa de números físicos) ═══ */
/* Logo Essenza (svg) */
.essenza-logo { height: 34px; width: auto; display: block; }

/* As 3 quadras — cards (Essenza destacada) */
.vista-quadras { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-top: var(--space-xl); }
.vquadra { border: 1px solid var(--line); border-radius: 12px; padding: var(--space-lg) var(--space-md); background: var(--paper); display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: border-color .25s, transform .25s var(--ease-out-soft); }
.vquadra:hover { transform: translateY(-3px); border-color: rgba(176,141,79,.5); }
.vquadra__qc { font-family: var(--font-mono); font-size: var(--type-11); color: var(--gold); letter-spacing: .12em; }
.vquadra__name { font-size: var(--type-24); font-weight: 600; letter-spacing: -0.02em; margin: 8px 0 6px; }
.vquadra__desc { font-size: var(--type-14); color: var(--text-secondary-light); line-height: 1.5; }
.vquadra__more { margin-top: auto; padding-top: var(--space-md); font-size: var(--type-12); font-weight: 600; letter-spacing: .04em; color: var(--teal-strong, var(--teal)); text-transform: uppercase; }
.vquadra--feat { border-color: var(--copper); border-width: 1.5px; }
.vquadra--feat .vquadra__qc, .vquadra--feat .vquadra__more { color: var(--copper); }
.vquadra__tag { align-self: flex-start; margin-bottom: 12px; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--copper); border: 1px solid currentColor; border-radius: 100px; padding: 2px 8px; }
@media (max-width: 760px) { .vista-quadras { grid-template-columns: 1fr; } }

/* Faixa de números FÍSICOS (sem financeiro) — 15 lotes · 360 m² · cota mais alta */
.vlote-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--line); margin-top: var(--space-xl); max-width: 720px; }
.vlote-spec { background: var(--paper); padding: var(--space-lg) var(--space-md); }
.vlote-spec__fig { font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 600; letter-spacing: -0.02em; color: var(--copper); line-height: 1; }
.vlote-spec__fig em { font-style: normal; font-size: .55em; color: var(--text-muted-light); font-weight: 500; margin-left: 3px; }
.vlote-spec__label { font-size: var(--type-13); color: var(--text-muted-light); margin-top: 10px; }
@media (max-width: 640px) { .vlote-specs { grid-template-columns: 1fr; } }

/* Mapa de DISPONIBILIDADE ao vivo — planta + pinos de status + legenda */
.vdispo { max-width: 980px; margin: var(--space-xl) auto 0; }
.vdispo__map { position: relative; display: block; border-radius: 6px; overflow: hidden; border: 1px solid rgba(0,0,0,.08); box-shadow: 0 24px 64px -24px rgba(0,0,0,.35); background: var(--gray-50); }
.vdispo__map img { width: 100%; display: block; }
.vdispo__pin { position: absolute; transform: translate(-50%, -50%); width: 15px; height: 15px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 6px rgba(0,0,0,.45); cursor: default; }
.vdispo__pin--disp { background: #3f9d5a; }
.vdispo__pin--nego { background: #c8814a; }
.vdispo__pin--resv { background: #8a8a8a; }
.vdispo__pin--disp::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid #3f9d5a; opacity: .6; animation: dispPulse 2.4s ease-in-out infinite; }
@keyframes dispPulse { 0%,100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.5); opacity: 0; } }
.vdispo__pin::after { content: attr(data-label); position: absolute; left: 50%; top: calc(100% + 5px); transform: translateX(-50%); font-size: 9px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: rgba(13,17,23,.82); padding: 2px 6px; border-radius: 3px; white-space: nowrap; opacity: 0; transition: opacity .2s; pointer-events: none; }
.vdispo__pin:hover::after { opacity: 1; }
.vdispo__legend { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin-top: var(--space-lg); font-size: var(--type-13); color: var(--text-muted-light); }
.vdispo__legend span { display: inline-flex; align-items: center; gap: 8px; }
.vdispo__legend i { width: 11px; height: 11px; border-radius: 50%; flex: none; }
@media (prefers-reduced-motion: reduce) { .vdispo__pin--disp::before { animation: none; } }
/* Inventário de lotes NUMERADOS (disponibilidade calma, controlável por número) */
.vdispo__planta { display: block; width: 100%; padding: 0; border: 1px solid rgba(0,0,0,.08); border-radius: 6px; overflow: hidden; cursor: zoom-in; background: var(--gray-50); box-shadow: 0 24px 64px -24px rgba(0,0,0,.35); }
.vdispo__planta img { width: 100%; display: block; transform: translate3d(0, var(--parallax-y, 0px), 0) scale(var(--fig-zoom, 1.05)); transition: transform .5s var(--ease-out-soft); will-change: transform; }
/* Toggle Humanizada ⇄ Técnica no mapa (padrão da apresentação X.52) — hairline, 1 accent */
.mapa-toggle { display: flex; justify-content: center; width: fit-content; margin: 0 auto var(--space-md); border-bottom: 1px solid rgba(24,24,24,.12); }
.mapa-toggle__btn { appearance: none; background: none; border: 0; cursor: pointer; padding: 10px 22px; margin-bottom: -1px; border-bottom: 2px solid transparent; font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(24,24,24,.45); transition: color .2s, border-color .2s; }
.mapa-toggle__btn:hover { color: rgba(24,24,24,.72); }
.mapa-toggle__btn.ativo { color: var(--map-accent, var(--copper)); border-bottom-color: var(--map-accent, var(--copper)); }

/* Números totais — spec-row (rótulo esq · valor dir, hairline), padrão da apresentação X.49.
   Fundo cream → texto ink; borda superior no accent (teal). */
.spec-row { list-style: none; padding: 0; margin: var(--space-lg) auto 0; display: flex; flex-direction: column; max-width: 620px; text-align: left; }
.spec-row li { display: grid; grid-template-columns: minmax(9em, 13em) 1fr; gap: var(--space-md); padding: 12px 0; border-bottom: 1px solid rgba(24,24,24,.10); align-items: baseline; }
.spec-row li:first-child { border-top: 2px solid var(--map-accent, var(--teal)); }
.spec-row li:last-child { border-bottom: none; }
.spec-label { font-family: var(--font-sans); font-weight: 600; font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(24,24,24,.5); }
.spec-val { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 620px) { .spec-row li { grid-template-columns: 1fr; gap: 2px; } }
.vdispo__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; margin-top: var(--space-lg); }
.vlot { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); }
.vlot__n { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--ink); }
.vlot__s { font-size: 8.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.vlot--disp { border-color: rgba(63,157,90,.45); } .vlot--disp .vlot__s { color: #3f9d5a; }
.vlot--nego { border-color: rgba(176,106,48,.45); } .vlot--nego .vlot__s { color: #b06a30; }
.vlot--fech { background: #e8e3d7; } .vlot--fech .vlot__n { color: var(--text-faint-light); text-decoration: line-through; } .vlot--fech .vlot__s { color: #8a8a8a; }

/* Notas obrigatórias (padrão): render = "imagem conceitual"; mapa com o Parque = concessão
   da Prefeitura à associação AL'DORA Viva. jnota = legenda sob figura/mapa; hero__aviso = no
   canto do hero (render de fundo). */
.jnota { font-size: 11px; line-height: 1.45; color: var(--text-faint-light); font-style: normal; text-align: center; margin: var(--space-sm) auto 0; max-width: 64ch; }
.jsub-hero__aviso { position: absolute; right: clamp(16px, 3vw, 40px); bottom: 14px; z-index: 4; font-size: 10px; letter-spacing: .01em; line-height: 1.35; color: rgba(var(--cream-rgb), .55); text-shadow: 0 1px 6px rgba(0,0,0,.6); max-width: 46ch; text-align: right; pointer-events: none; }
@media (max-width: 640px) { .jsub-hero__aviso { display: none; } }

/* Render/planta larga clicável (reusa a moldura do mapa) */
.vfig { display: block; width: 100%; margin-top: var(--space-lg); border-radius: 6px; overflow: hidden; border: 1px solid rgba(0,0,0,.08); box-shadow: 0 24px 64px -24px rgba(0,0,0,.3); cursor: zoom-in; padding: 0; background: var(--gray-50); }
.vfig img { width: 100%; display: block; transform: translate3d(0, var(--parallax-y, 0px), 0) scale(var(--fig-zoom, 1.05)); transition: transform .5s var(--ease-out-soft); will-change: transform; }
.vfig__cap { font-size: var(--type-12); color: var(--text-muted-light); text-align: center; margin-top: var(--space-sm); }

/* Mini-zoom (hover, como na galeria) + parallax de scroll gentil nas plantas/renders.
   PADRÃO para "esse tipo de foto" (planta humanizada · implantação · render): qualquer
   figura .vfig ou .vdispo__planta ganha automaticamente. O parallax (--parallax-y via
   js/fig-parallax.js) é suave (0.05) e o micro-bleed (scale 1.05) é absorvido pela margem
   do mapa — os números continuam legíveis; a leitura 100% fica a um clique (tela cheia). */
.vfig:hover img, .vdispo__planta:hover img { --fig-zoom: 1.10; }
@media (prefers-reduced-motion: reduce) {
  .vfig img, .vdispo__planta img { transform: none; transition: none; }
}

/* ---- Reveal "animação de aproximação" nas fotos (via js/effects.js) ---- */
.fx-ready .jsub-galeria__grid > .jsub-shot[data-reveal] { transform: scale(1.05); transition: opacity .9s var(--ease-out-soft), transform 1.1s var(--ease-out-soft); }
.fx-ready .jsub-galeria__grid > .jsub-shot[data-reveal].is-in { transform: none; }