/* =====================================================================
   CJC Imóveis — Design System compartilhado
   Tokens, tipografia, cabeçalho, rodapé, botões, cards e utilitários
   usados por todas as páginas do protótipo.
   ===================================================================== */

:root {
  --ink: #0d0d0c;
  --paper: #f5f5f2;
  --white: #fff;
  --muted: #72716c;
  --muted-2: #a3a29c;
  --line: rgba(13, 13, 12, .12);
  --line-strong: rgba(13, 13, 12, .24);
  --deep: #10100f;
  --deep-2: #161614;
  --sand: #e9e6df;
  --sand-2: #ebe8e2;
  /* O ouro nunca chegou a existir: `background: var(--ouro)` sem o
     token declarado nao e cor invalida, e propriedade descartada — o
     botao “Buscar” da capa saia transparente com texto branco sobre
     uma barra quase branca. Este tom passa 4,5:1 com branco, que e o
     minimo para texto de 15px. */
  --ouro: #8f6f33;
  --ouro-claro: #c6a862;
  --max: 1440px;
  --pad: clamp(20px, 4vw, 64px);
  --r-xl: 32px;
  --r-lg: 28px;
  --r-md: 20px;
  --r-sm: 14px;
  --r-pill: 999px;
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, .18);
  --shadow-md: 0 14px 40px rgba(0, 0, 0, .12);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --header-h: 84px;
  --header-h-compact: 72px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-feature-settings: "cv11", "ss01", "ss03";
  letter-spacing: -.012em;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
/* Sem o !important, qualquer regra que declare display vence o atributo
   hidden do navegador — foi o que fez a ficha técnica mostrar as 13 linhas
   mesmo com o corte pedindo 5. */
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 620; letter-spacing: -.045em; line-height: 1; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--ink); color: #fff; }

.wrap { width: min(var(--max), calc(100% - 2 * var(--pad))); margin-inline: auto; }
.eyebrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Tipografia de display ---------- */
.display-xl { font-size: clamp(58px, 7.6vw, 118px); line-height: .88; letter-spacing: -.066em; }
.display-lg { font-size: clamp(44px, 5.8vw, 84px); line-height: .94; letter-spacing: -.058em; }
.display-md { font-size: clamp(34px, 4.2vw, 58px); line-height: .98; letter-spacing: -.05em; }
.display-sm { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.04; letter-spacing: -.04em; }
.lead { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--muted); }

/* ---------- Seções ---------- */
section { padding: clamp(84px, 10vw, 150px) 0; }
.section-head { display: grid; grid-template-columns: 1.05fr .75fr; gap: 80px; align-items: end; margin-bottom: 52px; }
.section-head h2 { font-size: clamp(44px, 5.8vw, 84px); line-height: .94; letter-spacing: -.058em; margin: 11px 0 0; }
.section-head p { font-size: 18px; line-height: 1.58; color: var(--muted); max-width: 56ch; justify-self: end; }
.section-head.compact h2 { font-size: clamp(34px, 4.2vw, 58px); }
.section-head.compact { margin-bottom: 36px; }
.section-head .head-actions { display: flex; gap: 10px; justify-self: end; align-items: center; }

/* ---------- Motion ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Botões ---------- */
.btn {
  --btn-bg: var(--ink); --btn-fg: #fff; --btn-border: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 20px; border-radius: var(--r-pill);
  border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--btn-fg);
  font-size: 13px; font-weight: 650; white-space: nowrap;
  transition: transform .25s var(--ease), background .25s, color .25s, border-color .25s, opacity .25s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-border: var(--line-strong); }
.btn-ghost:hover { --btn-bg: var(--ink); --btn-fg: #fff; --btn-border: var(--ink); }
.btn-white { --btn-bg: #fff; --btn-fg: #111; --btn-border: #fff; }
/* A ação que a página mais quer. Um por tela: dois botões dourados na
   mesma vista deixam de significar prioridade. */
.btn-ouro { --btn-bg: var(--ouro); --btn-fg: #fff; --btn-border: var(--ouro); }
.btn-ouro:hover { --btn-bg: var(--ouro-claro); --btn-fg: var(--ink); --btn-border: var(--ouro-claro); }
.btn-glass { --btn-bg: rgba(255, 255, 255, .1); --btn-fg: #fff; --btn-border: rgba(255, 255, 255, .38); backdrop-filter: blur(10px); }
.btn-glass:hover { --btn-bg: rgba(255, 255, 255, .2); }
.btn-lg { height: 54px; padding: 0 26px; font-size: 14px; }
.btn-sm { height: 38px; padding: 0 14px; font-size: 12px; }
.btn-block { width: 100%; }
.btn-icon { width: 46px; padding: 0; }
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* Usado tanto em <a> quanto em <button>. Sem o reset, o botão herda a
   moldura do navegador e vira uma caixinha feia no meio do texto. */
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; background: none; border: 0; padding: 0; border-bottom: 1px solid transparent; transition: .25s; }
.link-arrow:hover { border-color: currentColor; }
.link-arrow:hover .arrow { transform: translateX(3px); }
.link-arrow .arrow { transition: transform .25s var(--ease); }

/* ---------- Chips, tags, controles ---------- */
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line); background: #fff; padding: 11px 15px; border-radius: var(--r-pill); font-size: 13px; font-weight: 560; color: #3f3e3a; transition: .25s var(--ease); white-space: nowrap; }
.chip:hover, .chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip:hover { transform: translateY(-1px); }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tab { border: 1px solid var(--line); border-radius: var(--r-pill); background: #fff; padding: 11px 16px; font-size: 13px; font-weight: 620; color: #5f5e59; transition: .25s; white-space: nowrap; }
.tab.active, .tab:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.tag { position: absolute; z-index: 2; top: 16px; left: 16px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px); border-radius: var(--r-pill); padding: 9px 12px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: #111; }
.tag.dark { background: rgba(13, 13, 12, .78); color: #fff; }
.favorite { position: absolute; z-index: 3; right: 16px; top: 16px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); display: grid; place-items: center; transition: .25s var(--ease); color: #111; }
.favorite svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: .25s; }
.favorite.on svg { fill: #111; }
.favorite:hover { transform: scale(1.06); }
.carousel-btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: #111; font-size: 20px; display: grid; place-items: center; transition: .25s; }
.carousel-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.carousel-btn:disabled { opacity: .35; cursor: default; }
.carousel-btn:disabled:hover { background: #fff; color: #111; border-color: var(--line); }
.segmented { display: inline-flex; padding: 4px; background: rgba(13, 13, 12, .06); border-radius: var(--r-pill); gap: 2px; }
.segmented button { border: 0; background: transparent; padding: 9px 16px; border-radius: var(--r-pill); font-size: 13px; font-weight: 620; color: #5f5e59; transition: .25s; }
.segmented button.active { background: #fff; color: var(--ink); box-shadow: 0 4px 14px rgba(0, 0, 0, .08); }

/* ---------- Formulários ---------- */
.field { display: grid; gap: 6px; }
.field label { font-size: 10px; text-transform: uppercase; letter-spacing: .13em; color: #8b8a84; font-weight: 700; }
.input, .select, .textarea {
  width: 100%; height: 48px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; padding: 0 14px; outline: 0;
  font-size: 14px; font-weight: 520; color: var(--ink); transition: border-color .2s, box-shadow .2s;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(13, 13, 12, .06); }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.textarea { height: auto; min-height: 120px; padding: 12px 14px; resize: vertical; line-height: 1.5; }

/* ---------- Cabeçalho ---------- */
.header {
  position: fixed; z-index: 100; top: 0; left: 0; right: 0; height: var(--header-h);
  display: flex; align-items: center; color: #fff; border-bottom: 1px solid transparent;
  transition: height .32s var(--ease), background .32s, color .32s, border-color .32s;
}
.header.scrolled, .header.solid {
  height: var(--header-h-compact); color: var(--ink); border-color: var(--line);
  background: rgba(247, 247, 244, .86); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
}
.header-inner { width: min(var(--max), calc(100% - 2 * var(--pad))); margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; color: inherit; flex: 0 0 auto; transition: transform .3s var(--ease); }
.brand:hover { transform: scale(1.03); }
.brand svg { height: 46px; width: auto; display: block; fill: currentColor; transition: height .32s var(--ease); }
.header.scrolled .brand svg, .header.solid .brand svg { height: 40px; }
/* nowrap porque "Empreendimentos / Lançamentos" quebrava em duas linhas
   e desalinhava o cabeçalho inteiro; o gap encolhe junto com a tela para
   os seis itens continuarem cabendo numa linha só. */
.nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); font-size: 13px; font-weight: 560; }
.nav a { white-space: nowrap; }
.nav a { opacity: .76; transition: opacity .2s; position: relative; padding: 6px 0; }
.nav a:hover, .nav a.active { opacity: 1; }
.nav a.active:after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; }
.header-actions { display: flex; align-items: center; gap: 9px; }
.header .btn-header-ghost { --btn-bg: rgba(255, 255, 255, .08); --btn-fg: #fff; --btn-border: rgba(255, 255, 255, .35); backdrop-filter: blur(10px); height: 44px; padding: 0 18px; }
.header .btn-header-solid { --btn-bg: #fff; --btn-fg: #111; --btn-border: #fff; height: 44px; padding: 0 18px; }
.header.scrolled .btn-header-ghost, .header.solid .btn-header-ghost { --btn-bg: #fff; --btn-fg: var(--ink); --btn-border: var(--line); }
.header.scrolled .btn-header-solid, .header.solid .btn-header-solid { --btn-bg: var(--ink); --btn-fg: #fff; --btn-border: var(--ink); }
.menu-btn { display: none; width: 44px; height: 44px; border: 0; background: transparent; color: inherit; place-items: center; }
.menu-btn svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.8; fill: none; }

/* Menu mobile em tela cheia */
/* `overflow-y:auto` e `gap` no lugar de `space-between`: sete links a
   52px mais o rodape passam de 620px de altura, e num laptop baixo o
   fim do menu ficava inalcancavel — a tela de fundo esta travada, e o
   proprio menu nao rolava. */
.mobile-menu { position: fixed; inset: 0; z-index: 200; background: var(--deep); color: #fff; padding: 104px var(--pad) 36px; display: flex; flex-direction: column; justify-content: space-between; gap: 34px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; opacity: 0; pointer-events: none; transform: translateY(-12px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.mobile-menu.open { opacity: 1; pointer-events: auto; transform: none; }
.mobile-menu nav { display: grid; gap: 18px; }
.mobile-menu nav a { font-size: clamp(30px, 8vw, 50px); letter-spacing: -.05em; font-weight: 620; line-height: 1; }
/* Tela baixa — laptop de 13" ou celular deitado — pede tipo menor, ou o
   menu vira uma lista que so se ve rolando. */
@media (max-height: 720px) {
  .mobile-menu { padding-top: 88px; gap: 26px; }
  .mobile-menu nav { gap: 13px; }
  .mobile-menu nav a { font-size: clamp(24px, 4.6vh, 34px); }
}
.mobile-menu nav a.active { color: #a3a29c; }
.mobile-menu .mm-foot { display: grid; gap: 14px; }
.mobile-menu .mm-foot p { color: #a3a29c; font-size: 13px; }
.mobile-close { position: fixed; top: 18px; right: var(--pad); z-index: 210; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: transparent; color: #fff; display: none; place-items: center; }
.mobile-menu.open ~ .mobile-close, body.menu-open .mobile-close { display: grid; }
body.menu-open { overflow: hidden; }

/* ---------- Cards de imóvel ---------- */
.prop-card { min-width: 0; display: block; color: inherit; }
.prop-media { height: clamp(380px, 39vw, 590px); border-radius: var(--r-lg); overflow: hidden; position: relative; background: #ddd; }
.prop-media:after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 54%, rgba(0, 0, 0, .38)); pointer-events: none; }
.prop-card img { transition: transform .7s var(--ease); }
.prop-card:hover img { transform: scale(1.025); }
.prop-copy { padding: 18px 3px 0; }
.prop-copy-top { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.prop-title { font-size: 23px; font-weight: 630; letter-spacing: -.035em; line-height: 1.05; }
.prop-price { font-size: 16px; font-weight: 650; white-space: nowrap; padding-top: 3px; }
.prop-meta { margin-top: 6px; font-size: 13px; color: var(--muted); line-height: 1.45; }
/* A cidade sai do cinza: é o primeiro corte de quem procura, e numa
   fita que se varre em dois segundos ela precisa se ler sem esforço. */
.prop-loc { margin-top: 4px; font-size: 12px; color: var(--muted-2); }
.prop-loc .loc-bairro:after { content: " · "; }
.prop-loc .loc-cidade { color: var(--ink); font-weight: 620; }
.prop-media .media-badges { position: absolute; z-index: 2; left: 16px; bottom: 16px; display: flex; gap: 6px; }
.media-badge { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--r-pill); background: rgba(13, 13, 12, .62); backdrop-filter: blur(8px); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.media-badge svg { width: 12px; height: 12px; fill: currentColor; }

/* ---------- Cards de empreendimento ---------- */
.dev-card { position: relative; overflow: hidden; border-radius: var(--r-xl); background: #ddd; display: block; color: #fff; }
.dev-card:after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .04) 35%, rgba(0, 0, 0, .74) 100%); pointer-events: none; }
.dev-card img { transition: transform .8s var(--ease); }
.dev-card:hover img { transform: scale(1.025); }
/* A marca da incorporadora fica solta sobre a foto, sem pastilha.
   Toda marca cadastrada é um PNG branco numa tela 3:1, com a tinta
   ocupando a mesma área e encostada à esquerda (logos_padrao.py): por
   isso a caixa aqui é fixa e a imagem preenche a caixa inteira — é a
   tela que se alinha, e a área igual faz a quadrada e a comprida
   parecerem do mesmo tamanho. Altura igual não fazia isso. A sombra
   curta segura a marca em foto clara. Sem marca cadastrada, o nome sai
   em pastilha, para nunca faltar assinatura. */
.developer-logo { position: absolute; z-index: 3; left: 22px; top: 22px; min-width: 88px; height: 34px; padding: 0 12px; border-radius: var(--r-pill); display: grid; place-items: center; background: rgba(13, 13, 12, .55); backdrop-filter: blur(10px); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.developer-logo.tem-marca { padding: 0; min-width: 0; width: 156px; height: 52px; background: none; backdrop-filter: none; border-radius: 0; top: 14px; display: block; }
.developer-logo.tem-marca img { display: block; width: 156px; height: 52px; object-fit: contain; object-position: left center; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }
/* Bandeira do país: solta, alinhada à direita, logo abaixo da etiqueta
   de estágio — sem pastilha. O fio claro é o contorno da bandeira, não
   um fundo: sem ele a faixa branca da americana se perde em céu claro.
   SVG simplificado — a 24 px se lê cor e geometria, não brasão. */
.bandeira { display: inline-block; width: 18px; height: 13px; border-radius: 2px; vertical-align: -1px; flex: none; }
.dev-pais { position: absolute; z-index: 3; right: 22px; top: 60px; display: grid; place-items: center; }
.dev-pais .bandeira { width: 24px; height: 17px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .32), 0 1px 3px rgba(0, 0, 0, .4); }
.prop-loc .bandeira { box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); vertical-align: -2px; margin-right: 7px; }
.dev-copy { position: absolute; z-index: 3; left: 26px; right: 26px; bottom: 24px; }
.dev-copy .eyebrow { color: rgba(255, 255, 255, .68); }
/* Segunda linha do card: onde fica. Bairro discreto, cidade em tom
   cheio (catalogo.css) — a mesma hierarquia do card de imóvel. */
.dev-copy .eb-lugar { margin-top: 5px; }
.dev-copy .eb-lugar .eb-bairro:after { content: " · "; }
.dev-copy h3 { font-size: clamp(30px, 4vw, 54px); line-height: .95; letter-spacing: -.048em; margin: 8px 0 10px; }
.dev-copy p { font-size: 14px; color: rgba(255, 255, 255, .78); max-width: 52ch; }
.dev-meta { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; font-size: 12px; color: rgba(255, 255, 255, .78); }
.dev-stage { position: absolute; z-index: 3; right: 22px; top: 22px; height: 30px; padding: 0 12px; border-radius: var(--r-pill); background: rgba(13, 13, 12, .55); backdrop-filter: blur(10px); color: #fff; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; display: grid; place-items: center; }

.prop-media > a { position: absolute; inset: 0; display: block; }
.prop-copy { display: block; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(10, 10, 9, .96); color: #fff; display: grid; grid-template-rows: auto 1fr auto; opacity: 0; transition: opacity .3s; }
.lightbox.open { opacity: 1; }
body.lb-open { overflow: hidden; }
.lb-head { display: flex; justify-content: space-between; gap: 16px; padding: 24px calc(var(--pad) + 64px) 12px var(--pad); font-size: 13px; color: #bbb; }
.lb-title { color: #fff; font-weight: 600; }
.lb-close { position: absolute; top: 16px; right: var(--pad); width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: transparent; color: #fff; display: grid; place-items: center; z-index: 2; }
.lb-stage { position: relative; min-height: 0; }
/* Invólucro posicionado, e não a imagem solta num grid: numa linha 1fr o
   navegador trata a altura como indefinida e o max-height: 100% da
   imagem simplesmente não vale — ela estourava o palco e passava por
   baixo das miniaturas. Com inset a altura é definida. */
.lb-img { position: absolute; inset: 0 calc(var(--pad) + 60px); display: flex; align-items: center; justify-content: center; }
.lb-img img { max-width: min(1400px, 100%); max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 12px; }
.lb-prev, .lb-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .25); }
.lb-prev:hover, .lb-next:hover { background: #fff; color: #111; }
.lb-prev { left: var(--pad); } .lb-next { right: var(--pad); }
.lb-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 18px var(--pad) 22px; scrollbar-width: none; }
.lb-thumbs::-webkit-scrollbar { display: none; }
.lb-thumbs button { flex: 0 0 96px; height: 64px; border: 2px solid transparent; border-radius: 8px; overflow: hidden; padding: 0; background: #222; opacity: .5; transition: .2s; }
.lb-thumbs button.active { opacity: 1; border-color: #fff; }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 300; background: rgba(10, 10, 9, .62); backdrop-filter: blur(8px); display: grid; place-items: center; padding: var(--pad); opacity: 0; transition: opacity .3s; }
.modal.open { opacity: 1; }
.modal-card { position: relative; background: #fff; color: var(--ink); border-radius: var(--r-lg); padding: 36px; width: min(620px, 100%); max-height: 100%; overflow: auto; box-shadow: var(--shadow-lg); transform: translateY(12px); transition: transform .3s var(--ease); }
.modal.open .modal-card { transform: none; }
.modal-card.wide { width: min(1100px, 100%); padding: 0; overflow: hidden; background: #000; color: #fff; }
.modal-close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: #111; display: grid; place-items: center; z-index: 2; }
.modal-card.wide .modal-close { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .3); color: #fff; }
.modal-card h3 { font-size: 30px; letter-spacing: -.04em; margin-bottom: 10px; }
.modal-card p { color: var(--muted); line-height: 1.55; }
.video-frame { position: relative; aspect-ratio: 16 / 9; background: #000; display: grid; place-items: center; }
.video-frame img { position: absolute; inset: 0; opacity: .55; }
.video-frame .video-note { position: relative; z-index: 1; text-align: center; padding: 24px; }
.video-frame .video-note strong { display: block; font-size: 22px; letter-spacing: -.03em; margin-bottom: 8px; }
.video-frame .video-note span { color: #bbb; font-size: 13px; }

/* ---------- Toast ---------- */
.toast { position: fixed; z-index: 999; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: var(--ink); color: #fff; border-radius: var(--r-pill); padding: 12px 18px; font-size: 13px; transition: .25s var(--ease); box-shadow: 0 12px 30px rgba(0, 0, 0, .2); max-width: calc(100% - 40px); text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Rodapé ---------- */
.footer { padding: 84px 0 28px; background: #0e0e0d; color: #fff; }
.footer-top { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; padding-bottom: 60px; border-bottom: 1px solid rgba(255, 255, 255, .1); align-items: end; }
.footer-top h3 { font-size: clamp(32px, 4vw, 54px); letter-spacing: -.05em; line-height: .96; max-width: 14ch; }
.footer-top p { color: #8c8b86; margin-top: 16px; max-width: 46ch; line-height: 1.55; }
.newsletter { display: flex; gap: 8px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r-pill); padding: 6px; max-width: 520px; justify-self: end; width: 100%; }
.newsletter input { flex: 1; min-width: 0; height: 46px; border: 0; background: transparent; padding: 0 16px; color: #fff; outline: 0; font-size: 14px; }
.newsletter input::placeholder { color: #8c8b86; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, .6fr); gap: 44px; padding-top: 56px; }
.footer-brand { display: flex; align-items: center; gap: 16px; }
.footer-brand svg { height: 52px; width: auto; fill: currentColor; }
.footer-brand span { font-size: 26px; letter-spacing: -.04em; font-weight: 620; }
.footer-copy { color: #8c8b86; max-width: 400px; line-height: 1.55; margin-top: 18px; font-size: 14px; }
.foot-col { display: grid; gap: 11px; align-content: start; }
.foot-col h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: #777; margin: 0 0 7px; font-weight: 700; }
.foot-col a { font-size: 14px; color: #b9b8b3; transition: color .2s; }
.foot-col a:hover { color: #fff; }
.copyright { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 58px; padding-top: 20px; display: flex; justify-content: space-between; gap: 20px; font-size: 11px; color: #72716c; flex-wrap: wrap; }

/* ---------- Barra CTA fixa (mobile) ---------- */
.sticky-cta { position: fixed; z-index: 90; left: 0; right: 0; bottom: 0; display: none; padding: 12px var(--pad); background: rgba(247, 247, 244, .92); backdrop-filter: blur(18px); border-top: 1px solid var(--line); align-items: center; justify-content: space-between; gap: 12px; }
.sticky-cta strong { font-size: 17px; letter-spacing: -.03em; }
.sticky-cta small { display: block; font-size: 11px; color: var(--muted); }

/* ---------- Leaflet skin ---------- */
/* O Leaflet numera as próprias camadas até 1000 — o controle de zoom
   sozinho é 800. Sem contexto de empilhamento próprio, esses números
   competem direto com o do cabeçalho (100) e ganham. Um z-index: 0 aqui
   encerra a disputa: tudo que o mapa desenha fica contido nele. */
.leaflet-container { position: relative; z-index: 0; font-family: var(--font); background: #e8e6e0; }
.leaflet-control-attribution { font-size: 9px; background: rgba(255, 255, 255, .7) !important; }
.leaflet-control-zoom { border: 0 !important; box-shadow: 0 8px 26px rgba(0, 0, 0, .15) !important; border-radius: 12px !important; overflow: hidden; }
.leaflet-control-zoom a { border: 0 !important; width: 36px !important; height: 36px !important; line-height: 36px !important; color: #111 !important; }
.res-marker { width: 18px; height: 18px; border-radius: 50%; background: #111; border: 4px solid rgba(255, 255, 255, .92); box-shadow: 0 4px 14px rgba(0, 0, 0, .25); transition: transform .2s; }
.res-marker.hot { transform: scale(1.35); background: #000; }
.price-marker { height: 30px; padding: 0 11px; border-radius: var(--r-pill); background: #fff; border: 1px solid rgba(0, 0, 0, .12); display: grid; place-items: center; font-size: 11px; font-weight: 750; letter-spacing: -.01em; box-shadow: 0 5px 16px rgba(0, 0, 0, .18); white-space: nowrap; color: #111; transition: .2s; }
.price-marker.hot, .price-marker:hover { background: #111; color: #fff; border-color: #111; transform: translateY(-2px); }
.dev-marker { min-width: 44px; height: 30px; padding: 0 9px; border-radius: 8px; background: #fff; border: 1px solid rgba(0, 0, 0, .15); display: grid; place-items: center; font-size: 8.5px; font-weight: 850; letter-spacing: .08em; box-shadow: 0 5px 16px rgba(0, 0, 0, .2); color: #111; white-space: nowrap; transition: .2s; }
.dev-marker.hot, .dev-marker:hover { background: #111; color: #fff; border-color: #111; transform: translateY(-2px); }
.leaflet-tooltip.cjc-tip { background: #111; color: #fff; border: 0; border-radius: 12px; padding: 10px 12px; box-shadow: 0 8px 20px rgba(0, 0, 0, .25); font-size: 11px; line-height: 1.35; }
.leaflet-tooltip.cjc-tip b { display: block; font-size: 12px; letter-spacing: -.01em; }
.leaflet-tooltip.cjc-tip:before { display: none; }
.leaflet-tooltip.cjc-tip .tip-img { width: 180px; height: 100px; border-radius: 8px; overflow: hidden; margin-bottom: 8px; }

/* ---------- Responsivo ---------- */
@media (max-width: 1000px) {
  .nav { display: none; }
  .menu-btn { display: grid; }
  .section-head { grid-template-columns: 1fr; gap: 24px; }
  .section-head p, .section-head .head-actions { justify-self: start; }
  .footer-top { grid-template-columns: 1fr; gap: 30px; }
  .newsletter { justify-self: start; }
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
  .foot-col:last-child { display: none; }
}
@media (max-width: 680px) {
  :root { --pad: 18px; --header-h: 72px; --header-h-compact: 64px; }
  .brand svg { height: 40px; }
  .header.scrolled .brand svg, .header.solid .brand svg { height: 36px; }
  .header-actions .btn-header-ghost, .header-actions .btn-header-solid { display: none; }
  /* 82 em cima e 82 embaixo somam 164px de nada entre uma seção e a
     outra — ritmo de tela grande aplicado a um telefone. Com carrossel
     dos dois lados da fronteira, 40 e 40 já separam o suficiente. */
  section { padding: 40px 0; }
  .section-head { margin-bottom: 34px; }
  .prop-media { height: 520px; }
  .footer { padding-top: 64px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .copyright { display: block; line-height: 1.8; }
  .sticky-cta { display: flex; }
  /* A classe has-sticky-cta nunca chegou a ser aplicada por ninguém —
     quem sabe se a barra existe é o próprio documento. */
  body.has-sticky-cta .footer,
  body:has(.sticky-cta) .footer { padding-bottom: 96px; }
}

/* ---------- Agendamento (imóvel e empreendimento) ---------- */
.dates { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 12px; }
.dates button { border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 8px 0; display: grid; gap: 2px; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; transition: .2s; }
.dates button b { font-size: 16px; color: var(--ink); letter-spacing: -.02em; font-weight: 620; }
.dates button.active { background: #111; border-color: #111; color: #bbb; }
.dates button.active b { color: #fff; }
.dates button:disabled { opacity: .3; cursor: default; }
.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 14px; }
.slots button { border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 9px 0; font-size: 12px; font-weight: 600; transition: .2s; }
.slots button.active { background: #111; color: #fff; border-color: #111; }

/* Janela mais larga para conteúdo em duas colunas, sem virar o modo escuro do vídeo. */
.modal-card.larga { width: min(980px, 100%); }

/* ---------- Marcador de empreendimento com logo ---------- */
/* iconSize zerado no Leaflet: quem dimensiona é o conteúdo, e o translate
   centraliza a marca exatamente sobre a coordenada. */
.cjc-marker-livre { width: 0 !important; height: 0 !important; }
.dev-marker.com-logo { position: absolute; left: 0; top: 0; width: max-content; min-width: 0; height: auto; padding: 7px 10px; border-radius: 14px; background: var(--ink); border: 0; display: block; box-shadow: 0 10px 26px rgba(0, 0, 0, .3); }
/* Limitar por largura E altura, com as duas dimensões livres: assim um
   lockup largo como o do Sarutaiá não se espalha pelo mapa, e um logo
   quadrado não fica minúsculo. No mapa do país o marcador é pequeno; a
   escala por zoom é que o faz crescer. */
/* O !important é obrigatório aqui: o leaflet.css declara
   `.leaflet-container .leaflet-marker-pane img { max-width: none !important }`
   e sem isto a marca aparece no tamanho natural do arquivo. */
.dev-marker.com-logo img { display: block; width: auto; height: auto; max-width: 62px !important; max-height: 20px !important; object-fit: contain; }
/* O leaflet.css entra depois desta folha e traz
   `.leaflet-container .leaflet-marker-pane img { max-width: none !important }`
   — mesma especificidade da regra acima, e ganha pela ordem. Repetida
   com o contêiner na frente, a nossa volta a valer; sem isto o PNG saía
   no tamanho natural em cima do mapa. */
.leaflet-container .dev-marker.com-logo img { max-width: 62px !important; max-height: 20px !important; }
/* A versão para fundo claro dispensa a plaquinha: só a marca sobre o mapa,
   com um halo branco para não se perder nas ruas. */
.dev-marker.com-logo.limpo { background: none; box-shadow: none; padding: 0; }
.dev-marker.com-logo.limpo img { max-width: 62px !important; max-height: 22px !important; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 7px rgba(255, 255, 255, .95)) drop-shadow(0 3px 8px rgba(255, 255, 255, .9)); }

/* Marcadores acompanham o zoom: presos ao lugar, não flutuando sempre do
   mesmo tamanho. A variável --marcador vem do JS a cada zoom. */
.leaflet-container .dev-marker,
.leaflet-container .price-marker,
.leaflet-container .res-marker { transform: scale(var(--marcador, 1)); transform-origin: center; }
.leaflet-container .dev-marker.com-logo { transform: translate(-50%, -50%) scale(var(--marcador, 1)); }
.leaflet-container .dev-marker.com-logo:hover { transform: translate(-50%, -50%) scale(var(--marcador, 1)) translateY(-2px); }
/* O .hot vinha da lista e não aparecia: ".dev-marker.hot" tem menos
   especificidade que ".dev-marker.com-logo.limpo" e que a regra de
   transform acima, então fundo e movimento eram zerados. O crescimento
   vai na imagem, e não no contêiner: ali o transform já carrega o
   translate de centralização e a escala por zoom. */
.dev-marker.com-logo img { transition: transform .18s ease, filter .18s ease; }
.dev-marker.com-logo.hot img { transform: scale(1.22); }
.dev-marker.com-logo.limpo.hot img { filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 10px #fff) drop-shadow(0 4px 12px rgba(0, 0, 0, .38)); }
.dev-marker.com-logo.hot:not(.limpo) { box-shadow: 0 14px 34px rgba(0, 0, 0, .45); }

/* Identificação profissional e direito de imagem. Corpo legível de
   propósito: o registro tem de acompanhar o nome, não sumir nele. */
.identificacao { margin: 0 0 10px; font-size: 13px; line-height: 1.7; color: var(--muted); }
.identificacao span { display: block; }
.identificacao b { display: block; color: var(--ink); font-weight: 600; }

/* Colofão, não seção. A informação é obrigatória e tem de estar legível,
   mas quem chegou até aqui já leu o anúncio — o bloco fecha a página em
   voz baixa, sem título e sem hierarquia de seção.
   A faixa sangra de ponta a ponta (o body já corta o overflow horizontal,
   então o 100vw é seguro) e o aviso mora numa caixa de fundo quase
   imperceptível: destaca sem gritar. */
/* 100vw inclui a barra de rolagem e sobrava 8px para o lado. O recuo
   negativo pelo padding do container chega ao mesmo sangramento sem
   inventar largura. */
.pe-de-pagina { margin: 56px calc(-1 * var(--pad)) 0; width: auto; padding: 26px var(--pad) 40px; border-top: 1px solid var(--line); font-size: 11px; line-height: 1.6; color: var(--muted-2); }
.pe-de-pagina .eyebrow { display: none; }
.pe-interno { width: min(var(--max), 100%); margin-inline: auto; background: rgba(13, 13, 12, .022); border: 1px solid var(--line); border-radius: 16px; padding: 18px 22px; }
.pe-de-pagina .identificacao { margin: 0 0 8px; font-size: 11px; line-height: 1.6; color: var(--muted-2); }
.pe-de-pagina .identificacao span { display: inline; }
.pe-de-pagina .identificacao span + span::before { content: " · "; }
.pe-de-pagina .identificacao b { display: inline; font-weight: 600; color: var(--muted); }
.pe-textos { display: grid; gap: 6px; }
.pe-de-pagina .aviso-legal,
.pe-de-pagina .direitos-imagem { margin: 0; padding: 0; border: 0; font-size: 11px; line-height: 1.65; color: var(--muted-2); }

footer .identificacao { margin: 22px 0 14px; }

@media (max-width: 720px) {
  .pe-interno { padding: 16px; border-radius: 14px; }
}

/* ---------- Atendimento ---------- */
/* Botão flutuante: presente sem ser barulhento. No celular vira só o
   círculo, e sobe quando a barra fixa da página de imóvel está no ar. */
.wa-flutuante { position: fixed; z-index: 88; right: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: 9px; padding: 13px 18px 13px 15px; border: 0; border-radius: 999px; background: var(--deep); color: #fff; font: 600 14px/1 var(--font); letter-spacing: -.01em; cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, .22); transition: transform .2s ease, box-shadow .2s ease; }
.wa-flutuante:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(0, 0, 0, .28); }
/* Em laptop o botão de 170px cobria o “Buscar” da home e o “Ver todas as
   fotos” do imóvel. Abaixo de 1300 ele vira só o ícone e some de cima
   deles; o rótulo volta onde há espaço. */
@media (max-width: 1300px) {
  .wa-flutuante { padding: 14px; }
  .wa-flutuante span { display: none; }
}
.wa-flutuante svg { width: 20px; height: 20px; }

.modal-contato { max-width: 420px; }
.contato-form h3 { margin: 0 0 6px; font-size: 24px; letter-spacing: -.03em; }
.contato-form .sub { margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.contato-form .field { margin-bottom: 10px; }
.contato-form .erro { margin: 0 0 10px; font-size: 13px; color: #a3231f; }
.contato-form .lgpd { margin: 14px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--muted); }

@media (max-width: 860px) {
  .wa-flutuante { right: 14px; bottom: 14px; padding: 14px; }
  .wa-flutuante span { display: none; }
  body.has-sticky-cta .wa-flutuante,
  body:has(.sticky-cta) .wa-flutuante { bottom: 86px; }
}

/* ---------- Balão de grupo no mapa ----------
   Herda o logo de um empreendimento do grupo para a marca não sumir no
   zoom aberto; a contagem entra como selo no canto. Tamanho fixo de
   propósito: ele é sinalização, não conteúdo, e não acompanha a escala
   por zoom dos marcadores. */
.cjc-cluster { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--deep); border: 3px solid rgba(255, 255, 255, .92); box-shadow: 0 6px 20px rgba(0, 0, 0, .28); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.cjc-cluster:hover, .cjc-cluster.hot { transform: translate(-50%, -50%) scale(1.14); box-shadow: 0 10px 28px rgba(0, 0, 0, .34); }
.cjc-cluster b { font-size: 14px; font-weight: 750; letter-spacing: -.02em; color: #fff; }

/* ══════════════════════════════════════════════════════════════════════
   Correções da auditoria mobile
   ══════════════════════════════════════════════════════════════════════ */

/* A barra fixa de contato nasce escondida e entra quando o bloco de
   abertura sai da tela — ver mobile.js. Sem JS ela aparece direto, que é
   o comportamento antigo. */

/* Entre 681 e 900px a coluna lateral vai para o fim da página e a barra
   fixa não nascia: quem chegava de tablet rolava tudo sem achar contato.
   A barra vale até 900px, e o WhatsApp flutuante sai quando ela existe —
   duas chamadas fixas no mesmo canto se atropelam. */
@media (max-width: 900px) {
  .sticky-cta { display: flex; }
  body.has-sticky-cta .footer,
  body:has(.sticky-cta) .footer { padding-bottom: 96px; }
  body.has-sticky-cta .wa-flutuante,
  body:has(.sticky-cta) .wa-flutuante { display: none; }
}

.sticky-cta[data-apos] { transform: translateY(100%); transition: transform .28s var(--ease); }
.sticky-cta[data-apos].on { transform: none; }

/* Faixa de fatos parada: no toque não há hover para pausar, e ninguém lê
   preço e prazo em movimento. Vira uma faixa que a pessoa arrasta. */
.faixa.parada { animation: none !important; width: auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.faixa.parada::-webkit-scrollbar { display: none; }
.faixa.parada .f[aria-hidden] { display: none; }
.faixa.parada .f { scroll-snap-align: start; }

/* Mapa travado até o primeiro toque: o dedo que rola a página não pode
   arrastar o mapa junto. */
.leaflet-container.mapa-travado { touch-action: pan-y; }

/* A atribuição do Leaflet cabia em 9px e ainda saía cortada na direita. */
.leaflet-control-attribution { max-width: calc(100% - 12px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Alvos de toque. O mínimo confortável é 44px; vários componentes do
   tema tinham entre 18 e 39. Onde o desenho não comporta altura, o
   padding negativo devolve a área sem mexer no espaçamento visual. */
.link-arrow { padding-block: 12px; margin-block: -12px; }
.favorite { width: 44px; height: 44px; }
.leaflet-touch .leaflet-bar a,
.leaflet-container .leaflet-control-zoom a { width: 44px !important; height: 44px !important; line-height: 44px !important; }

/* Texto legal corrido não é rótulo: 11px é pouco para ler um parágrafo. */
.aviso-legal, .direitos-imagem, .identificacao,
.pe-de-pagina .aviso-legal, .pe-de-pagina .direitos-imagem,
.aviso-imagens, .index-fonte, .inc-fonte, p.note { font-size: 12px; line-height: 1.55; }

/* Etiquetas que a auditoria pegou a 10px. */
.dev-stage, .tag, .status { font-size: 11px; }

/* O alternador Lista|Mapa vive na barra de filtros no desktop; no
   celular ela rola 700px para a direita e ninguém o encontra. A cópia no
   cabeçalho de resultados só existe abaixo de 680px. */
/* Duas classes, mesma especificidade: a folha do catálogo carregava
   depois e reacendia a cópia. Somando as duas, esta ganha. */
.view-toggle.view-toggle-mobile { display: none; }

@media (max-width: 680px) {
  /* Abaixo de 16px o iOS dá zoom sozinho ao focar o campo e desloca a
     página inteira. O visual menor fica só no desktop. */
  input, select, textarea, .input, .select { font-size: 16px !important; }
  .search-cell select { min-height: 44px; padding: 10px 0; }
  .search-cell label, .campo label, .field label { font-size: 11px; }

  .footer-grid a { display: block; padding: 10px 0; }
  .tab, .btn-sm, .chip { min-height: 44px; }
  .dias button { flex: 0 0 48px; min-height: 48px; }
  .slots button, .horas button { min-height: 44px; }

  .view-toggle-mobile { display: inline-flex; }
  .filterbar .fright { display: none; }
  /* Dica de que a faixa de filtros continua para o lado. */
  .filterbar .wrap { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); }

  /* Tabela de unidades: a coluna de valor começava fora da tela. Some o
     que se repete na ficha (tipologia, andar, suítes), a unidade fica
     presa à esquerda e nada quebra em duas linhas. */
  .table-wrap .col-tipologia,
  .table-wrap .col-grupo,
  .table-wrap .col-suites { display: none; }
  .table-wrap th, .table-wrap td { padding: 12px 10px; white-space: nowrap; }
  .table-wrap th { font-size: 11px; }
  .table-wrap th:first-child, .table-wrap td:first-child { position: sticky; left: 0; z-index: 1; background: var(--paper); }
  .table-wrap { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); }

  /* O mapa é o produto da página: 340px era menos de metade da tela. */
  #mapaCheio { height: min(60svh, 520px); }
  .mapa-filtros { flex-wrap: wrap; row-gap: 8px; }
  .mapa-lista { max-height: none; }
}

/* O card de empreendimento traz um parágrafo de descrição por cima da
   foto. Numa vitrine — home e cartão virtual — ele cobria metade da
   imagem, que é justamente o que faz alguém clicar. Ali sobram o nome, o
   bairro, a cidade e a linha de números. O texto continua no catálogo,
   onde a pessoa está comparando e quer ler. */
body.home .dev-card .dev-copy p,
.cartao-track .dev-card .dev-copy p { display: none; }

/* A galeria em tela cheia, no celular.
   As setas reservavam 78px de cada lado (--pad + 60): numa tela de 375px
   sobravam 219 para a foto. Elas passam a flutuar sobre a imagem, nos
   cantos de baixo, onde o polegar alcança — e a foto fica com a largura
   inteira. As miniaturas encolhem para devolver altura. */
@media (max-width: 680px) {
  .lb-img { inset: 0 6px; }
  .lb-img img { border-radius: 10px; }
  .lb-head { padding: 16px var(--pad) 8px; font-size: 12px; }
  .lb-close { top: 10px; width: 40px; height: 40px; }
  .lb-prev, .lb-next { top: auto; bottom: 12px; transform: none; width: 46px; height: 46px; background: rgba(10, 10, 9, .55); backdrop-filter: blur(8px); border-color: rgba(255, 255, 255, .3); }
  .lb-prev { left: 12px; } .lb-next { right: 12px; }
  .lb-thumbs { padding: 10px var(--pad) 14px; gap: 6px; }
  .lb-thumbs button { flex: 0 0 64px; height: 44px; }
}