/* ══════════════════════════════════════════════════════════
   LAMARE IMÓVEIS — sistema visual v6

   A ideia que governa: a corretora que SELECIONA, não a vitrine
   que lista. Autoridade vem de rigor editorial — poucos imóveis,
   bem apresentados, com dado técnico à mostra.

   Cor: grafite (60%) · creme (30%) · dourado = MARCA (filete,
   rótulo, selo). O dourado nunca preenche botão.
   Tipografia: Instrument Serif no display + sans do sistema no
   corpo. Duas famílias, nunca três.

   v6 refatorou o arquivo: as cinco camadas empilhadas (v3, v4,
   v5 e duas revisões) viraram @layer em ordem declarada, e o
   código morto da abertura antiga saiu. Regra nova entra na
   camada certa — não no fim do arquivo.
   ══════════════════════════════════════════════════════════ */

@layer reset, tokens, base, layout, componentes, pagina, motion, resposta;

@font-face{
  font-family:'Instrument Serif';
  src:url('../fontes/instrument-serif-latin.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Serif';
  src:url('../fontes/instrument-serif-latin-ext.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ══ TOKENS ═══════════════════════════════════════════════ */
@layer tokens{
  :root{
    color-scheme:light;

    /* base */
    --ink:#0C0D11; --ink-2:#14161C; --ink-3:#1E212A; --ink-4:#2A2E39;
    --cream:#F3F2EE; --paper:#FFFFFF; --cream-2:#EAE7DF; --cream-3:#DFDACF; --sand:#C6BCA9;
    /* marca */
    --gold:#C9A24A; --gold-lt:#E3C77F; --gold-dk:#7A5E1F;
    /* texto */
    --txt:#15171C; --txt-2:#3D414B; --mute:#5A5F6A; --linha:#DED6C7;
    --linha-escura:rgba(247,244,238,.14);
    --wine:#8E2F3A;

    /* superfícies derivadas — elevação por degrau de cor, nunca por sombra */
    --vidro:color-mix(in srgb, var(--ink) 46%, transparent);
    --vidro-claro:color-mix(in srgb, var(--paper) 78%, transparent);
    --fio-suave:color-mix(in srgb, var(--linha) 70%, transparent);

    --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
    --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;

    /* escala de espaço em 8 */
    --e1:8px; --e2:16px; --e3:24px; --e4:32px; --e5:48px; --e6:64px; --e7:96px; --e8:128px;
    /* respiro entre seções: uma variável, não um clamp copiado em dez lugares */
    --respiro:clamp(64px,8vw,116px);

    /* escala tipográfica fluida */
    --fs-display:clamp(2.6rem,7vw,5.2rem);
    --fs-d2:clamp(1.9rem,4vw,3.1rem);
    --fs-d3:clamp(1.35rem,2.4vw,1.9rem);
    --fs-corpo:clamp(15.5px,1.05vw,16.5px);
    --fs-rotulo:11px;

    --maxw:1360px; --pad:clamp(20px,4.5vw,56px);
    --altura-topo:72px;

    --ease:cubic-bezier(.22,1,.36,1);
    --ease-out:cubic-bezier(.16,1,.3,1);
    --ease-suave:cubic-bezier(.33,1,.68,1);
    --t-hover:.13s; --t-entra:.32s;
  }
}

/* ══ RESET ════════════════════════════════════════════════ */
@layer reset{
  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--altura-topo) + 16px); }
  body{ margin:0; overflow-x:hidden; }
  img,svg,video{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  p{ margin:0 0 1em; }
  ul,ol{ margin:0; padding:0; list-style:none; }
  button,input,select,textarea{ font:inherit; color:inherit; }
  button{ background:none; border:0; }
  :where(h1,h2,h3,h4){ margin:0; font-weight:400; }
}

/* ══ BASE ═════════════════════════════════════════════════ */
@layer base{
  body{
    background:var(--cream); color:var(--txt);
    font-family:var(--sans); font-size:var(--fs-corpo); line-height:1.62;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    accent-color:var(--gold);
  }
  ::selection{ background:var(--gold); color:var(--ink); }

  h1,h2,h3,.display{
    font-family:var(--serif); letter-spacing:-.005em; line-height:1.06; text-wrap:balance;
  }
  p{ text-wrap:pretty; }
  .d1{ font-size:var(--fs-display); letter-spacing:-.025em; line-height:.98; }
  .d2{ font-size:var(--fs-d2); }
  .d3{ font-size:var(--fs-d3); }

  /* rótulo: caixa alta espaçada — a voz "técnica" do sistema */
  .rotulo{
    font-family:var(--sans); font-size:var(--fs-rotulo); font-weight:600;
    letter-spacing:.2em; text-transform:uppercase; color:var(--mute);
  }
  .rotulo-ouro{ color:var(--gold-dk); }
  .rotulo-claro{ color:rgba(247,244,238,.6); }

  .filete{ height:1px; background:var(--linha); border:0; margin:0; }
  .filete-ouro{ height:1px; background:var(--gold); opacity:.55; border:0; }

  /* números sempre alinhados: preço em coluna com largura irregular parece erro */
  .preco,.numeros b,.custos b,.contagem{ font-variant-numeric:tabular-nums; }

  /* foco de teclado: o outline do navegador sumia no fundo escuro */
  :is(a,button,input,select,textarea,[tabindex]):focus-visible{
    outline:2px solid var(--gold); outline-offset:3px; border-radius:1px;
  }
  :is(.palco,.faixa,.capa-listagem,.rodape,.cidade) a:focus-visible{ outline-color:var(--gold-lt); }

  .skip{ position:absolute; left:-9999px; top:0; z-index:99; background:var(--gold); color:var(--ink); padding:12px 18px; font-weight:600; }
  .skip:focus{ left:12px; top:12px; }
}

/* ══ LAYOUT ═══════════════════════════════════════════════ */
@layer layout{
  .wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
  .secao{ padding-block:var(--respiro); }
  /* a seção logo depois do palco não precisa do respiro cheio: o hero já deu ar */
  .palco + .secao{ padding-top:clamp(40px,5vw,72px); }

  .secao-topo{
    display:flex; align-items:flex-end; justify-content:space-between;
    gap:var(--e3) var(--e4); flex-wrap:wrap; margin-bottom:var(--e4);
  }
  .secao-topo .esq{ display:flex; flex-direction:column; gap:10px; }
  .conta{ color:var(--mute); font-size:13px; letter-spacing:.1em; text-transform:uppercase; }
  .secao-topo .conta-abaixo{ margin-top:2px; }
  .secao-topo a.conta{ display:inline-block; padding-block:5px; }
  .secao-topo a.conta:hover{ color:var(--gold-dk); }
}

/* ══ COMPONENTES ══════════════════════════════════════════ */
@layer componentes{

  /* ── botões ───────────────────────────────────────────── */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    padding:15px 28px; border:0; cursor:pointer; border-radius:2px;
    font-size:13.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
    transition:background var(--t-hover) ease-out, color var(--t-hover) ease-out,
               box-shadow var(--t-hover) ease-out, transform var(--t-hover) ease-out;
  }
  .btn-zap,.btn-escuro{ background:var(--ink); color:var(--cream); }
  .btn-zap:hover,.btn-escuro:hover{ background:var(--ink-3); transform:translateY(-1px); }
  .btn-claro{ background:var(--cream); color:var(--ink); }
  .btn-claro:hover{ background:var(--paper); transform:translateY(-1px); }
  /* contorno: o dourado aparece como fio, nunca como preenchimento */
  .btn-fio{ background:transparent; color:var(--txt); box-shadow:inset 0 0 0 1px var(--linha); }
  .btn-fio:hover{ box-shadow:inset 0 0 0 1px var(--gold); color:var(--gold-dk); }
  .btn-fio-claro{ background:transparent; color:var(--cream); box-shadow:inset 0 0 0 1px var(--linha-escura); }
  .btn-fio-claro:hover{ box-shadow:inset 0 0 0 1px var(--gold); color:var(--gold-lt); }
  .btn-block{ width:100%; }
  .btn:disabled{ opacity:.5; cursor:progress; transform:none; }
  /* sobre fundo escuro o CTA inverte: creme sólido salta mais que qualquer cor */
  :is(.faixa,.palco) .btn-zap{ background:var(--cream); color:var(--ink); }
  :is(.faixa,.palco) .btn-zap:hover{ background:var(--paper); }

  /* ── cabeçalho ────────────────────────────────────────── */
  .topo{
    position:sticky; top:0; z-index:40; color:var(--cream);
    background:color-mix(in srgb, var(--ink) 82%, transparent);
    backdrop-filter:saturate(160%) blur(18px);
    -webkit-backdrop-filter:saturate(160%) blur(18px);
    border-bottom:1px solid transparent;
    transition:background .3s var(--ease-suave), border-color .3s var(--ease-suave);
  }
  /* condensa ao rolar: fundo fecha, altura encolhe, filete dourado aparece */
  .topo.compacto{
    background:color-mix(in srgb, var(--ink) 96%, transparent);
    border-bottom-color:color-mix(in srgb, var(--gold) 34%, transparent);
  }
  .topo-in{
    display:flex; align-items:center; gap:var(--e3);
    min-height:var(--altura-topo);
    transition:min-height .3s var(--ease-suave);
  }
  .topo.compacto .topo-in{ min-height:60px; }

  /* o link da marca tinha 22px de altura clicável: a WCAG 2.5.8 pede 24.
     Padding com margem negativa cresce o alvo sem mexer no espaçamento. */
  .marca{ display:flex; align-items:baseline; gap:14px; margin-right:auto; padding-block:8px; margin-block:-8px; }
  .marca img{ height:24px; width:auto; transition:height .3s var(--ease-suave); }
  .topo.compacto .marca img{ height:21px; }
  .marca-sub{
    font-size:9.5px; letter-spacing:.34em; text-transform:uppercase; color:var(--gold);
    white-space:nowrap; padding-bottom:2px;
  }
  .topo nav{ display:flex; align-items:center; gap:var(--e4); }
  .topo nav a.link{
    display:inline-block; padding-block:7px; position:relative; white-space:nowrap;
    font-size:12.5px; letter-spacing:.11em; text-transform:uppercase;
    color:rgba(247,244,238,.74); transition:color .25s;
  }
  .topo nav a.link::after{
    content:''; position:absolute; left:0; right:100%; bottom:1px; height:1px;
    background:var(--gold); transition:right .35s var(--ease);
  }
  .topo nav a.link:hover{ color:var(--cream); }
  .topo nav a.link:hover::after{ right:0; }
  .topo .btn{ padding:11px 20px; font-size:11.5px; }
  .topo .btn-zap{ background:transparent; color:var(--cream); box-shadow:inset 0 0 0 1px rgba(247,244,238,.28); }
  .topo .btn-zap:hover{ background:var(--cream); color:var(--ink); box-shadow:none; }

  /* ── palco (hero estático) ────────────────────────────── */
  .palco{
    position:relative; display:flex; flex-direction:column; justify-content:flex-end;
    min-height:min(90svh,840px); overflow:hidden; isolation:isolate;
    background:var(--ink); color:var(--cream);
  }
  .palco-fundo{ position:absolute; inset:0; z-index:0; }
  .palco-fundo img,.palco-fundo video{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.01);
  }
  /* O palco abre com a foto da corretora (3024px de largura, nítida em retina)
     e alterna com a do imóvel em destaque. A ordem é essa porque foto de
     imóvel sobe pelo painel reduzida a 1920 no maior lado: quando é vertical,
     sobram 1200px de largura para uma faixa de 3840 na tela, e o hero abria
     borrado. Só opacity anima, que é barato e não repinta nada. */
  .palco-fundo .pf-a{ object-position:62% 30%; }
  .palco-fundo .pf-b{ object-position:50% 46%; opacity:0; animation:palco-troca 20s ease-in-out 4s infinite; }
  @keyframes palco-troca{
    0%,6%   { opacity:0; }
    20%,46% { opacity:1; }
    60%,100%{ opacity:0; }
  }
  .palco-veu{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
      linear-gradient(90deg,rgba(12,13,17,.78) 0%,rgba(12,13,17,.34) 44%,rgba(12,13,17,0) 72%),
      linear-gradient(to top,rgba(12,13,17,.84) 0%,rgba(12,13,17,0) 48%);
  }
  .palco-in{ position:relative; z-index:2; padding-block:clamp(104px,14vh,176px) clamp(24px,3vh,36px); }
  .palco .rotulo{ color:var(--gold-lt); }
  .palco h1{ max-width:18ch; margin-top:var(--e3); }
  .palco .sub{ color:rgba(247,244,238,.82); max-width:42ch; margin-top:var(--e3); font-size:clamp(16px,1.6vw,18px); }

  /* kinetic typography: as palavras do título entram uma a uma */
  .palavra{ display:inline-block; overflow:hidden; vertical-align:top; }
  .palavra > i{ display:inline-block; font-style:normal; }
  .js .palavra > i{ transform:translateY(105%); }

  /* rodapé do palco: só o indicador de rolagem — o imóvel em destaque saiu
     daqui em 05/10/2026 e virou a seção .destaque, em tamanho de vitrine */
  .palco-pe{
    position:relative; z-index:2; display:flex; align-items:flex-end; justify-content:flex-end;
    gap:var(--e4); padding-block:var(--e3) clamp(20px,3vh,32px); flex-wrap:wrap;
  }
  .palco-rolar{ display:flex; align-items:center; gap:12px; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:rgba(247,244,238,.55); }
  .palco-rolar .linha{ width:52px; height:1px; background:rgba(247,244,238,.3); position:relative; overflow:hidden; }
  .palco-rolar .linha::after{ content:''; position:absolute; inset:0; background:var(--gold); transform:translateX(-100%); animation:corre 2.4s var(--ease-suave) infinite; }

  /* ── busca ────────────────────────────────────────────── */
  .busca{
    position:relative; z-index:3; display:grid; gap:0;
    grid-template-columns:repeat(4,1fr) auto; align-items:stretch;
    background:var(--cream); color:var(--txt); border-top:2px solid var(--gold);
  }
  .busca .campo{ display:flex; flex-direction:column; gap:6px; padding:18px 22px; border-right:1px solid var(--linha); min-width:0; }
  .busca label{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute); font-weight:700; }
  .busca input,.busca select{
    width:100%; padding:0; border:0; background:transparent; font-size:16px; color:var(--txt);
    appearance:none; cursor:pointer; min-width:0; text-overflow:ellipsis;
  }
  .busca input{ cursor:text; }
  .busca input::placeholder{ color:var(--sand); }
  .busca :is(input,select):focus{ outline:0; }
  .busca .campo:focus-within{ background:var(--paper); box-shadow:inset 0 -2px 0 var(--gold); }
  .busca .avancado{ grid-column:1/-1; display:none; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--linha); }
  .busca.aberto .avancado{ display:grid; }
  .busca .enviar{
    cursor:pointer; padding:0 34px; background:var(--ink); color:var(--cream);
    font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
    display:flex; align-items:center; gap:10px; transition:background var(--t-hover) ease-out;
  }
  .busca .enviar:hover{ background:var(--ink-3); }
  .busca .mais{
    grid-column:1/-1; border-top:1px solid var(--linha); color:var(--mute);
    padding:12px; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; cursor:pointer;
  }
  .busca .mais:hover{ color:var(--gold-dk); }

  /* busca sobre a foto: vidro escuro com filete dourado no topo.
     É o objeto central do hero — o que separa vitrine de corretor
     de "site institucional com banner". */
  .busca-palco{
    margin-top:clamp(28px,4vh,52px);
    background:var(--vidro); color:var(--cream);
    backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
    border:1px solid rgba(247,244,238,.12); border-top:2px solid var(--gold);
  }
  .busca-palco .campo{ border-right-color:rgba(247,244,238,.12); }
  .busca-palco label{ font-size:9.5px; letter-spacing:.2em; color:rgba(247,244,238,.55); }
  .busca-palco input,.busca-palco select{ color:var(--cream); font-size:15.5px; }
  .busca-palco input::placeholder{ color:rgba(247,244,238,.38); }
  .busca-palco select option{ color:#15171C; }
  .busca-palco .campo:focus-within{ background:rgba(247,244,238,.07); box-shadow:inset 0 -2px 0 var(--gold); }
  .busca-palco .enviar{ background:var(--cream); color:var(--ink); }
  .busca-palco .enviar:hover{ background:var(--paper); }
  .busca-palco .enviar svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; }
  .busca-palco .mais{ border-top-color:rgba(247,244,238,.12); background:transparent; color:rgba(247,244,238,.6); }
  .busca-palco .mais:hover{ color:var(--gold-lt); }
  .busca-palco .avancado{ border-top-color:rgba(247,244,238,.12); }

  /* ── barra de filtros: gruda sob o cabeçalho enquanto a grade rola ── */
  .barra-filtros{
    position:sticky; top:var(--altura-topo); z-index:30;
    display:flex; align-items:center; gap:var(--e3);
    margin-bottom:var(--e4); padding-block:12px;
    background:color-mix(in srgb, var(--cream) 88%, transparent);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid transparent;
    transition:border-color .25s ease-out, padding .25s var(--ease-suave);
  }
  .barra-filtros.presa{ border-bottom-color:var(--linha); }
  .barra-filtros .ordem{ display:flex; align-items:center; gap:12px; margin-left:auto; flex:none; }

  /* ── chips de filtro rápido ───────────────────────────── */
  .chips{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; min-width:0; }
  .chip{
    display:inline-flex; align-items:center; gap:8px; padding:9px 16px; cursor:pointer;
    background:transparent; box-shadow:inset 0 0 0 1px var(--linha); color:var(--txt-2);
    font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
    transition:box-shadow var(--t-hover) ease-out, color var(--t-hover) ease-out, background var(--t-hover) ease-out;
  }
  .chip:hover{ box-shadow:inset 0 0 0 1px var(--ink); color:var(--txt); background:var(--paper); }
  .chip[aria-pressed="true"]{ background:var(--ink); color:var(--cream); box-shadow:inset 0 0 0 1px var(--ink); }
  .chip .n{ font-size:10.5px; opacity:.6; }
  .chip svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.6; flex:none; }
  .chips .divisor{ width:1px; height:24px; background:var(--linha); margin-inline:2px; }

  /* select próprio: o nativo entrega a seta do sistema e estraga a página */
  .selecao{ position:relative; display:inline-flex; }
  .selecao::after{
    content:''; position:absolute; right:13px; top:50%; width:7px; height:7px; pointer-events:none;
    border-right:1.5px solid var(--mute); border-bottom:1.5px solid var(--mute);
    transform:translateY(-70%) rotate(45deg);
  }
  .ordenar{
    appearance:none; padding:10px 36px 10px 14px; cursor:pointer;
    background:transparent; box-shadow:inset 0 0 0 1px var(--linha); border:0; border-radius:2px;
    font-size:12.5px; letter-spacing:.06em; color:var(--txt);
    transition:box-shadow var(--t-hover) ease-out;
  }
  .ordenar:hover{ box-shadow:inset 0 0 0 1px var(--ink); }

  /* ── grade e cartão editorial ─────────────────────────── */
  .grade{
    display:grid; gap:clamp(34px,4vw,58px) clamp(22px,2.6vw,38px);
    grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  }
  .grade.poucos{ grid-template-columns:repeat(auto-fit,minmax(320px,520px)); justify-content:start; }

  .card{ position:relative; display:flex; flex-direction:column; container-type:inline-size; }
  /* o site.js esconde card filtrado com o atributo hidden, e hidden só vale
     enquanto ninguém declarar display. O display:flex acima vencia o atributo,
     então filtrar mudava a CONTAGEM e deixava a grade intacta. */
  .card[hidden]{ display:none; }
  .card .capa{
    position:relative; display:block; aspect-ratio:4/3; overflow:hidden;
    background:var(--cream-3) linear-gradient(110deg,var(--cream-2),var(--cream-3) 60%);
  }
  .card .capa .moldura{ position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(12,13,17,.1); pointer-events:none; z-index:2; }
  .card .capa .vazia{ width:100%; height:100%; display:grid; place-items:center; color:var(--sand); font-family:var(--serif); font-size:17px; letter-spacing:.14em; text-transform:uppercase; }

  /* carrossel dentro do card: é assim que o visitante compara sem abrir um por um */
  .card .trilho{ display:flex; height:100%; width:100%; transition:transform .42s var(--ease-suave); will-change:transform; }
  .card .trilho > *{ flex:0 0 100%; height:100%; }
  .card .trilho img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-out); }
  /* o zoom só vale quando há uma foto: com carrossel, ele atrapalha a leitura */
  .card:hover .trilho.uma img{ transform:scale(1.045); }

  .card .seta{
    position:absolute; top:50%; z-index:3; width:40px; height:40px; border-radius:50%;
    display:grid; place-items:center; cursor:pointer; color:var(--ink);
    background:var(--vidro-claro); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    opacity:0; transform:translateY(-50%) scale(.86);
    transition:opacity var(--t-hover) ease-out, transform var(--t-hover) ease-out, background var(--t-hover) ease-out;
  }
  .card .seta:hover{ background:var(--paper); }
  .card .seta.ant{ left:12px; }
  .card .seta.prox{ right:12px; }
  .card:hover .seta,.card:focus-within .seta{ opacity:1; transform:translateY(-50%) scale(1); }
  .card .seta[disabled]{ opacity:0 !important; pointer-events:none; }

  .card .pontos{ position:absolute; bottom:12px; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:5px; }
  .card .pontos i{
    width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.55);
    box-shadow:0 1px 3px rgba(12,13,17,.5);
    transition:background var(--t-hover) ease-out, width var(--t-hover) ease-out;
  }
  .card .pontos i.on{ background:#fff; width:14px; border-radius:2px; }

  /* véu na base da foto: dá leitura aos pontos sem escurecer a imagem toda */
  .card .capa::after{
    content:''; position:absolute; inset:auto 0 0 0; height:34%; z-index:2; pointer-events:none;
    background:linear-gradient(to top,rgba(12,13,17,.34),transparent);
    opacity:0; transition:opacity .25s ease-out;
  }
  .card:hover .capa::after,.card:focus-within .capa::after{ opacity:1; }

  .selo{
    position:absolute; z-index:3; padding:7px 13px; font-size:10px; font-weight:700;
    letter-spacing:.2em; text-transform:uppercase;
  }
  .card .selo-negocio,
  .destaque-foto .selo-negocio{
    top:0; left:0; color:var(--cream); letter-spacing:.22em; font-weight:600;
    background:color-mix(in srgb, var(--ink) 55%, transparent);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    box-shadow:inset 0 0 0 1px rgba(247,244,238,.18);
  }
  .card .selo-status{ bottom:0; left:0; background:var(--cream); color:var(--ink); }
  .selo-fotos{ bottom:0; right:0; color:rgba(255,255,255,.9); letter-spacing:.1em; font-weight:600; text-shadow:0 1px 4px rgba(12,13,17,.7); }

  .card .favorito{
    position:absolute; top:12px; right:12px; z-index:4; width:36px; height:36px; border-radius:50%;
    display:grid; place-items:center; cursor:pointer; color:#fff;
    background:color-mix(in srgb, var(--ink) 34%, transparent);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    transition:background var(--t-hover) ease-out, color var(--t-hover) ease-out, transform var(--t-hover) ease-out;
  }
  .card .favorito:hover{ background:color-mix(in srgb, var(--ink) 62%, transparent); transform:scale(1.08); }
  .card .favorito svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; }
  .card .favorito[aria-pressed="true"]{ background:var(--paper); color:var(--wine); }
  .card .favorito[aria-pressed="true"] svg{ fill:currentColor; }
  .card .favorito.bateu svg{ animation:pulsa .34s var(--ease-suave); }

  .card .corpo{ padding-top:var(--e2); display:flex; flex-direction:column; gap:9px; }
  .card .linha-topo{
    display:flex; align-items:baseline; justify-content:space-between; gap:var(--e2);
    border-top:1px solid var(--sand); padding-top:var(--e2);
    transition:border-color var(--t-hover) ease-out;
  }
  .card:hover .linha-topo{ border-top-color:var(--gold); }
  .card .preco{ font-family:var(--serif); font-size:1.6rem; line-height:1; letter-spacing:-.01em; color:var(--ink); }
  .card .preco em{ font-family:var(--sans); font-style:normal; font-size:12px; color:var(--mute); letter-spacing:.08em; }
  .card .local{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); text-align:right; }
  .card h3{ font-family:var(--sans); font-size:1rem; font-weight:500; line-height:1.45; color:var(--txt-2); }
  .card h3 a{ display:inline-block; padding-block:5px; margin-block:-5px; transition:color var(--t-hover) ease-out; }
  .card:hover h3 a{ color:var(--ink); }
  .card .complemento{ font-size:12.5px; color:var(--mute); }
  .card .specs{ display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:4px; color:var(--txt-2); font-size:13.5px; }
  .card .specs span{ display:inline-flex; align-items:baseline; gap:7px; }
  .card .specs b{ font-weight:600; }
  .card .specs svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.5; opacity:.55; flex:none; }

  .card .saiba{
    position:relative; align-self:flex-start; display:inline-flex; align-items:center; gap:9px;
    margin-top:6px; padding-block:10px 6px; color:var(--txt);
    font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  }
  .card .saiba::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--linha); transition:background var(--t-hover) ease-out; }
  .card .saiba span{ transition:transform var(--t-hover) ease-out; }
  .card .saiba:hover{ color:var(--gold-dk); }
  .card .saiba:hover span{ transform:translateX(5px); }
  .card:hover .saiba::after{ background:var(--gold); }

  /* o card fala com a própria largura, não com a do navegador */
  @container (max-width:300px){
    .card .preco{ font-size:1.35rem; }
    .card .specs{ gap:4px 12px; font-size:12.5px; }
    .card .local{ font-size:11px; letter-spacing:.1em; }
  }

  /* ── grade editorial: o primeiro imóvel ocupa duas colunas ──
     Grade toda igual vira catálogo. O destaque dá hierarquia
     sem inventar informação — é o mesmo card, com mais foto. */
  @media (min-width:1080px){
    .grade-editorial > .card:first-child{
      grid-column:span 2;
      display:grid; grid-template-columns:1.1fr .9fr; align-items:start;
      column-gap:clamp(24px,2.4vw,40px);
    }
    /* sem height:100% aqui: com aspect-ratio junto, a largura vira altura x 4/3 e a foto invade a coluna do texto */
    .grade-editorial > .card:first-child .capa{ aspect-ratio:4/3; min-width:0; }
    .grade-editorial > .card:first-child .corpo{ min-width:0; }
    .grade-editorial > .card:first-child .corpo{ padding-top:6px; gap:12px; }
    /* o filete de cima não faz sentido quando o texto está ao lado da foto */
    .grade-editorial > .card:first-child .linha-topo{ border-top:0; padding-top:0; flex-direction:column; align-items:flex-start; gap:6px; }
    .grade-editorial > .card:first-child .local{ text-align:left; }
    .grade-editorial > .card:first-child .preco{ font-size:2.4rem; }
    .grade-editorial > .card:first-child h3{ font-size:1.25rem; color:var(--txt); }
    .grade-editorial > .card:first-child .specs{ margin-top:10px; }
  }

  .vazio{ text-align:center; padding:clamp(48px,7vw,88px) var(--e3); border:1px solid var(--linha); background:color-mix(in srgb, var(--paper) 42%, transparent); }
  .vazio h3{ font-family:var(--serif); font-size:clamp(1.5rem,3vw,2rem); margin-bottom:12px; }
  .vazio p{ color:var(--mute); max-width:56ch; margin-inline:auto; }

  /* ── seção da cidade ──────────────────────────────────── */
  .cidade{ position:relative; overflow:hidden; background:var(--ink); color:var(--cream); }
  .cidade img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.38; filter:blur(1px); transform:scale(1.02); }
  .cidade::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(100deg,rgba(12,13,17,.82) 0%,rgba(12,13,17,.42) 55%,rgba(12,13,17,.2) 100%);
  }
  .cidade .wrap{ position:relative; z-index:2; padding-block:var(--respiro); }
  .cidade .rotulo{ color:var(--gold-lt); }
  .cidade h2{ max-width:22ch; margin-top:var(--e2); }
  .cidade p{ color:rgba(247,244,238,.78); max-width:52ch; margin-top:var(--e2); }
  .cidade .lista{ display:flex; flex-wrap:wrap; gap:10px; margin-top:var(--e4); }
  .cidade .lista a{
    padding:9px 16px; box-shadow:inset 0 0 0 1px rgba(247,244,238,.22);
    font-size:12px; letter-spacing:.12em; text-transform:uppercase;
    transition:color var(--t-hover) ease-out, background var(--t-hover) ease-out, box-shadow var(--t-hover) ease-out;
  }
  .cidade .lista a:hover{ background:var(--cream); color:var(--ink); box-shadow:none; }

  /* ── faixa de contato ─────────────────────────────────── */
  .faixa{ background:var(--ink); color:var(--cream); }
  .faixa-in{ padding-block:clamp(72px,9vw,120px); text-align:center; }
  .faixa .rotulo{ color:var(--gold); display:block; }
  .faixa h2{ margin-top:var(--e2); margin-inline:auto; max-width:18ch; }
  .faixa p{ color:rgba(247,244,238,.72); margin:var(--e2) auto 0; max-width:48ch; }
  .faixa-acoes{ display:flex; gap:var(--e2); justify-content:center; flex-wrap:wrap; margin-top:var(--e4); }
  .faixa-nota{ margin-top:var(--e4); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(247,244,238,.42); }

  /* ── rodapé ───────────────────────────────────────────── */
  .rodape{ background:var(--ink-2); color:rgba(247,244,238,.64); padding:var(--e6) 0 var(--e4); font-size:14px; }
  .rodape .grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:var(--e4) var(--e5); }
  .rodape .marca-rodape{ margin-bottom:var(--e3); }
  .rodape .marca-rodape img{ width:230px; height:auto; }
  .rodape h4{ color:var(--cream); font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; margin:0 0 var(--e2); font-family:var(--sans); }
  .rodape p{ line-height:1.5; }
  .rodape p a{ display:inline-block; padding-block:5px; transition:color var(--t-hover) ease-out; }
  .rodape a:hover{ color:var(--gold-lt); }
  .rodape .fim{
    margin-top:var(--e5); padding-top:var(--e3); border-top:1px solid var(--linha-escura);
    display:flex; justify-content:space-between; gap:var(--e2); flex-wrap:wrap;
    font-size:12px; color:rgba(247,244,238,.4);
  }

  /* ── contato flutuante e barra fixa do celular ────────── */
  .zap-flut{
    position:fixed; right:22px; bottom:22px; z-index:50; width:54px; height:54px;
    display:grid; place-items:center; border-radius:50%; color:var(--cream);
    background:color-mix(in srgb, var(--ink) 92%, transparent);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    box-shadow:inset 0 0 0 1px rgba(201,162,74,.55), 0 16px 36px -16px rgba(12,13,17,.8);
    transform:translateY(18px) scale(.92); opacity:0; pointer-events:none;
    transition:opacity .4s var(--ease), transform .4s var(--ease), background .25s;
  }
  .zap-flut.ver{ transform:none; opacity:1; pointer-events:auto; }
  .zap-flut:hover{ background:var(--ink); box-shadow:inset 0 0 0 1px var(--gold), 0 18px 40px -16px rgba(12,13,17,.9); }

  .barra-fixa{
    position:fixed; left:0; right:0; bottom:0; z-index:45; display:none;
    align-items:center; gap:14px; color:var(--cream);
    padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
    background:color-mix(in srgb, var(--ink) 94%, transparent);
    backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
    border-top:1px solid rgba(201,162,74,.4);
    transform:translateY(100%); transition:transform .32s var(--ease-suave);
  }
  .barra-fixa.ver{ transform:none; }
  .barra-fixa .preco{ font-family:var(--serif); font-size:1.25rem; line-height:1; margin-right:auto; color:var(--cream); }
  .barra-fixa .preco small{ display:block; font-family:var(--sans); font-size:10px; color:rgba(247,244,238,.5); letter-spacing:.16em; text-transform:uppercase; margin-top:5px; }
  .barra-fixa .marca-min{ display:flex; flex-direction:column; gap:3px; margin-right:auto; min-width:0; }
  .barra-fixa .marca-min b{ font-family:var(--serif); font-size:15px; font-weight:400; letter-spacing:.26em; color:var(--cream); }
  .barra-fixa .marca-min span{ font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
  .barra-fixa .btn{ padding:14px 24px; font-size:11.5px; }
  .barra-fixa .btn-zap{ background:var(--cream); color:var(--ink); }
  .barra-fixa .btn-zap:hover{ background:var(--paper); }

  .progresso-topo{
    position:fixed; top:0; left:0; height:2px; width:100%; z-index:60; transform-origin:0 50%;
    transform:scaleX(0); background:var(--gold); pointer-events:none; transition:transform .1s linear;
  }
}

/* ══ PÁGINAS ══════════════════════════════════════════════ */
@layer pagina{

  /* ── página do imóvel ─────────────────────────────────── */
  .migalha{ padding:var(--e3) 0; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); }
  .migalha a{ display:inline-block; padding-block:4px; }
  .migalha a:hover{ color:var(--gold-dk); }

  /* galeria: hairline escuro entre as células, no lugar de borda */
  .galeria{
    display:grid; gap:2px; background:var(--ink); overflow:hidden;
    grid-template-columns:2fr 1fr 1fr; grid-template-rows:repeat(2,1fr);
    height:clamp(320px,40vw,560px);
  }
  .galeria .g{ position:relative; background:var(--cream-3); overflow:hidden; cursor:zoom-in; }
  .galeria .g img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out); }
  .galeria .g:hover img{ transform:scale(1.045); }
  .galeria .g::after{ content:''; position:absolute; inset:0; background:rgba(12,13,17,0); transition:background var(--t-hover) ease-out; pointer-events:none; }
  .galeria .g:hover::after{ background:rgba(12,13,17,.12); }
  .galeria .g1{ grid-row:1/3; }
  /* o grid padrão é de 5 fotos: com 2, 3 ou 4 sobra célula vazia, e o fundo
     escuro da galeria vira um buraco preto. As variantes ficam presas acima
     de 821px, senão vencem a media query do celular. */
  @media (min-width:821px){
    .galeria.n1{ grid-template-columns:1fr; grid-template-rows:1fr; }
    .galeria.n2{ grid-template-columns:1fr 1fr; grid-template-rows:1fr; }
    .galeria.n2 .g1{ grid-row:auto; }
    .galeria.n3{ grid-template-columns:2fr 1fr; }
    .galeria.n4{ grid-template-columns:2fr 1fr; grid-template-rows:repeat(3,1fr); }
    .galeria.n4 .g1{ grid-row:1/4; }
  }
  .galeria .g1::before{
    content:'enlarge'; position:absolute; bottom:14px; left:14px; z-index:2;
    padding:7px 14px; background:var(--vidro-claro); color:var(--ink);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
    opacity:0; transform:translateY(6px); transition:opacity .2s ease-out, transform .2s ease-out;
  }
  .galeria .g1:hover::before{ opacity:1; transform:none; }
  .galeria .mais-fotos{
    position:absolute; inset:0; display:grid; place-items:center; background:rgba(12,13,17,.6);
    color:var(--cream); font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  }

  /* um grid só para cabeça, corpo e lateral: no celular o preço sobe
     para logo depois do título, que é onde ele tem que estar */
  .imovel{
    display:grid; grid-template-columns:1fr 390px;
    column-gap:clamp(32px,5vw,72px); row-gap:0; align-items:start;
    padding-bottom:clamp(56px,7vw,96px);
  }
  .imovel > .cabeca{ grid-column:1; grid-row:1; margin:clamp(28px,3.5vw,44px) 0 var(--e3); }
  .imovel > .corpo-imovel{ grid-column:1; grid-row:2; }
  .imovel > .lateral{ grid-column:2; grid-row:1 / span 2; }
  .imovel .cabeca h1{ margin-top:var(--e2); max-width:20ch; }
  .imovel .cabeca .local{ color:var(--mute); margin-top:var(--e2); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; }
  .imovel .tags{ display:flex; flex-wrap:wrap; gap:8px; }

  .tag{ padding:6px 13px; font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; background:transparent; box-shadow:inset 0 0 0 1px var(--linha); color:var(--mute); }
  .tag-marca{ box-shadow:inset 0 0 0 1px var(--gold); color:var(--gold-dk); }
  .tag-fio{ box-shadow:inset 0 0 0 1px var(--linha); color:var(--mute); }

  .numeros{
    display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
    border-top:1px solid var(--linha); margin:var(--e4) 0;
  }
  .numeros div{ padding:var(--e3) var(--e2); border-right:1px solid var(--linha); border-bottom:1px solid var(--linha); min-width:0; }
  .numeros b{ display:block; font-family:var(--serif); font-size:1.75rem; font-weight:400; line-height:1; white-space:nowrap; }
  .numeros span{ display:block; margin-top:8px; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute); white-space:nowrap; }

  .bloco{ margin:var(--e6) 0; }
  .bloco > .rotulo{ display:block; margin-bottom:12px; }
  .bloco h2{ margin-bottom:var(--e3); }
  .bloco p{ color:var(--txt-2); max-width:68ch; }
  .descricao{ white-space:pre-wrap; font-size:16.5px; line-height:1.75; }

  .carac{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); border-top:1px solid var(--linha); }
  .carac li{ display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--linha); font-size:14.5px; color:var(--txt-2); }
  .carac li::before{ content:''; width:6px; height:6px; flex:none; background:var(--gold); transform:rotate(45deg); }

  .custos{ display:flex; flex-wrap:wrap; border-top:1px solid var(--linha); }
  .custos div{ flex:1 1 170px; padding:var(--e3) var(--e2) var(--e3) 0; border-bottom:1px solid var(--linha); }
  .custos span{ display:block; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute); margin-bottom:8px; }
  .custos b{ font-family:var(--serif); font-size:1.45rem; font-weight:400; }
  .nota{ font-size:12.5px; color:var(--mute); margin-top:var(--e2); max-width:60ch; }

  .video{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--ink); }
  .video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

  /* coluna de contato */
  .lateral{ position:sticky; top:calc(var(--altura-topo) + 24px); display:grid; gap:var(--e3); }
  .caixa{ background:var(--paper); border:1px solid var(--linha); padding:var(--e4); }
  .caixa-marca{ border-top:2px solid var(--gold); }
  .caixa .preco{ font-family:var(--serif); font-size:2.4rem; line-height:1; }
  .caixa .preco small{ display:block; font-family:var(--sans); font-size:13px; color:var(--mute); margin-top:10px; letter-spacing:0; }
  .caixa .ref{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute); margin-top:12px; }
  .caixa .acoes{ display:grid; gap:10px; margin-top:var(--e3); }
  .caixa .corretora{ display:flex; align-items:center; gap:14px; margin-top:var(--e3); padding-top:var(--e3); border-top:1px solid var(--linha); }
  .caixa .corretora img{ width:56px; height:56px; border-radius:50%; object-fit:cover; }
  .caixa .corretora b{ display:block; font-size:15px; }
  .caixa .corretora span{ font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); }

  .semelhantes{ border-top:1px solid var(--linha); }

  /* lightbox */
  .lightbox{ position:fixed; inset:0; z-index:90; background:rgba(8,9,12,.97); display:none; place-items:center; }
  .lightbox.ver{ display:grid; }
  .lightbox img{ max-width:min(95vw,1500px); max-height:86vh; object-fit:contain; }
  .lightbox .fechar,.lightbox .nav{
    position:absolute; color:var(--cream); box-shadow:inset 0 0 0 1px rgba(247,244,238,.2);
    cursor:pointer; width:50px; height:50px; display:grid; place-items:center; font-size:20px;
    transition:background .25s, box-shadow .25s;
  }
  .lightbox .fechar:hover,.lightbox .nav:hover{ background:rgba(247,244,238,.1); box-shadow:inset 0 0 0 1px var(--gold); }
  .lightbox .fechar{ top:22px; right:22px; }
  .lightbox .nav.ant{ left:22px; top:50%; transform:translateY(-50%); }
  .lightbox .nav.prox{ right:22px; top:50%; transform:translateY(-50%); }
  .lightbox .contador{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%); color:rgba(247,244,238,.65); font-size:12px; letter-spacing:.14em; text-transform:uppercase; text-align:center; max-width:80vw; }

  /* ── páginas de listagem (tipo, bairro, negócio) ──────── */
  .capa-listagem{ background:var(--ink); color:var(--cream); }
  .capa-listagem .wrap{ padding-block:clamp(40px,5vw,72px) clamp(28px,3.5vw,44px); }
  .capa-listagem .rotulo{ color:var(--gold-lt); }
  .capa-listagem h1{ margin-top:var(--e2); max-width:22ch; }
  .capa-listagem p{ color:rgba(247,244,238,.74); max-width:56ch; margin-top:var(--e2); }
  .capa-listagem .migalha{ padding-block:0 var(--e3); color:rgba(247,244,238,.52); }
  .capa-listagem .migalha a:hover{ color:var(--gold-lt); }
  .capa-listagem + .secao{ padding-top:clamp(40px,5vw,72px); }

  .atalhos{ display:flex; flex-wrap:wrap; gap:10px; margin-top:var(--e4); }
  .atalhos a{
    padding:9px 16px; font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
    color:rgba(247,244,238,.74); box-shadow:inset 0 0 0 1px rgba(247,244,238,.22);
    transition:color var(--t-hover) ease-out, box-shadow var(--t-hover) ease-out, background var(--t-hover) ease-out;
  }
  .atalhos a:hover{ color:var(--ink); background:var(--cream); box-shadow:none; }
  .atalhos a[aria-current="page"]{ color:var(--ink); background:var(--gold); box-shadow:none; }

  /* ══ ABERTURA ═══════════════════════════════════════════
     A cortina existe para dar um tempo de respiro antes da
     vitrine: a marca se escreve, o filete corre, a tela sobe.
     Roda em CSS puro de propósito. Se o JS falhar ou demorar,
     a animação termina do mesmo jeito e ninguém fica preso. */
  .cortina{
    position:fixed; inset:0; z-index:200; background:var(--ink);
    display:grid; place-items:center; overflow:hidden;
    animation:cortina-sai .72s cubic-bezier(.76,0,.24,1) 1.55s forwards;
  }
  .cortina-in{ display:grid; justify-items:center; gap:var(--e2); }
  .cortina-nome{
    display:flex; font-family:var(--serif); color:var(--cream);
    font-size:clamp(2.4rem,8vw,5rem); line-height:1; letter-spacing:.22em; padding-left:.22em;
  }
  .cortina-nome i{
    display:block; font-style:normal; opacity:0; transform:translateY(38%);
    animation:cortina-letra .7s cubic-bezier(.16,1,.3,1) forwards;
    animation-delay:calc(.08s + var(--i) * .07s);
  }
  .cortina-fio{
    display:block; height:1px; width:min(280px,54vw); transform-origin:left center; transform:scaleX(0);
    background:linear-gradient(90deg,transparent,var(--gold) 18%,var(--gold-lt) 50%,var(--gold) 82%,transparent);
    animation:cortina-fio .8s cubic-bezier(.16,1,.3,1) .5s forwards;
  }
  .cortina-sub{
    font-size:11px; letter-spacing:.3em; text-transform:uppercase;
    color:rgba(247,244,238,.46); opacity:0;
    animation:cortina-sub .6s ease-out .74s forwards;
  }
  @keyframes cortina-letra{ to{ opacity:1; transform:none; } }
  @keyframes cortina-fio{ to{ transform:scaleX(1); } }
  @keyframes cortina-sub{ to{ opacity:1; } }
  @keyframes cortina-sai{ to{ transform:translateY(-101%); visibility:hidden; } }
  /* sem JS não há sessionStorage para controlar a repetição: melhor não mostrar */
  html:not(.js) .cortina, .sem-cortina .cortina{ display:none; }

  /* ══ A CORRETORA ════════════════════════════════════════
     O rosto é o argumento: quem compra imóvel de milhões quer
     saber com quem está falando antes de abrir o WhatsApp. */
  .corretora{ background:var(--ink); color:var(--cream); overflow:hidden; }
  .corretora-in{
    display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,88px); align-items:center;
    padding-block:var(--respiro) clamp(40px,5vw,72px);
  }
  .corretora-txt .rotulo-ouro{ color:var(--gold-lt); }
  .corretora-nome{
    font-family:var(--serif); font-weight:400; line-height:.9; margin-top:var(--e3);
    display:grid; font-size:clamp(2.6rem,5.4vw,4.4rem);
  }
  .corretora-nome em{ font-style:italic; color:var(--gold-lt); padding-left:.08em; }
  .corretora-lede{ margin-top:var(--e3); font-size:clamp(16px,1.25vw,18px); color:rgba(247,244,238,.86); max-width:52ch; }
  .corretora-txt p + p{ margin-top:var(--e2); color:rgba(247,244,238,.64); max-width:52ch; }
  .corretora-selos{
    list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--e3);
    margin-top:var(--e5); padding-top:var(--e3); border-top:1px solid var(--linha-escura);
  }
  .corretora-selos b{ display:block; font-size:13px; letter-spacing:.06em; color:var(--cream); }
  .corretora-selos span{ display:block; margin-top:6px; font-size:12.5px; color:rgba(247,244,238,.52); line-height:1.45; }
  .corretora-txt .btn-zap{ margin-top:var(--e5); }

  .corretora-foto{ position:relative; max-width:min(100%,580px); margin-left:auto; }
  .corretora-foto img{
    width:100%; height:auto; max-height:min(80vh,800px); display:block; object-fit:cover; object-position:50% 50%;
    aspect-ratio:3/4; border-radius:260px 260px 10px 10px;
    clip-path:inset(0 0 0 0);
  }
  /* o filete dourado deslocado é a assinatura da marca, não decoração */
  .corretora-moldura{
    position:absolute; inset:22px -22px -22px 22px; pointer-events:none;
    border:1px solid color-mix(in srgb,var(--gold) 52%, transparent);
    border-radius:260px 260px 10px 10px;
  }

  /* faixa de bastidores: anda sozinha, devagar, e para no hover.
     NÃO chamar isto de .trilho: esse nome já é do carrossel de fotos
     dentro do card de imóvel (.card .trilho), e como esta camada vence
     a de componentes, a regra daqui arredondava a foto de TODO imóvel. */
  .bastidores{
    padding-block:clamp(28px,4vw,56px) var(--respiro);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  }
  .bastidores-in{ display:flex; gap:var(--e2); width:max-content; animation:bastidores 64s linear infinite; }
  .bastidores:hover .bastidores-in{ animation-play-state:paused; }
  .bastidores figure{ margin:0; flex:0 0 auto; width:clamp(168px,16vw,236px); }
  .bastidores figure img{
    width:100%; height:auto; display:block; border-radius:140px 140px 8px 8px;
    filter:saturate(.92); opacity:.86; transition:opacity var(--t-hover) ease-out, filter var(--t-hover) ease-out;
  }
  .bastidores figure:hover img{ opacity:1; filter:none; }
  @keyframes bastidores{ to{ transform:translateX(-50%); } }

  /* ══ IMÓVEL EM DESTAQUE ═════════════════════════════════
     O primeiro imóvel não disputa espaço com os outros dez:
     ele tem a largura inteira, foto grande e preço legível de
     longe. É a vitrine da loja, não mais um item da prateleira. */
  .destaque{ background:var(--cream-2); border-block:1px solid var(--fio-suave); }
  .destaque-in{
    display:grid; grid-template-columns:1.25fr .85fr; gap:clamp(28px,4vw,64px); align-items:center;
    padding-block:var(--respiro);
  }
  .destaque-foto{ position:relative; }
  .destaque-foto > a{ display:block; position:relative; overflow:hidden; background:var(--cream-3); }
  .destaque-foto img{
    width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; display:block;
    transition:transform .9s var(--ease-suave);
  }
  .destaque-foto > a:hover img{ transform:scale(1.03); }
  .destaque-foto .moldura{
    position:absolute; inset:0; pointer-events:none;
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 10%, transparent);
  }
  .destaque-foto .selo-negocio{ z-index:3; }
  .destaque-foto .vazia{
    display:grid; place-items:center; aspect-ratio:3/2; color:var(--mute);
    font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  }
  .destaque-tiras{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px; }
  .destaque-tiras img{
    width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; display:block;
    opacity:.88; transition:opacity var(--t-hover) ease-out;
  }
  .destaque-tiras a:hover img{ opacity:1; }

  .destaque-txt h2{ margin-top:var(--e2); }
  .destaque-txt h2 a{ color:inherit; }
  .destaque-txt h2 a:hover{ color:var(--gold-dk); }
  .destaque-local{ margin-top:var(--e2); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); }
  .destaque-preco{
    margin-top:var(--e3); font-family:var(--serif); font-size:clamp(2rem,3.2vw,2.9rem); line-height:1;
    display:flex; flex-wrap:wrap; align-items:baseline; gap:12px;
  }
  .destaque-preco small{ font-family:var(--sans); font-size:13px; color:var(--mute); }
  .destaque-specs{
    list-style:none; display:flex; flex-wrap:wrap; gap:var(--e3);
    margin-top:var(--e3); padding-top:var(--e3); border-top:1px solid var(--fio-suave);
  }
  .destaque-specs li{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--txt-2); }
  .destaque-specs b{ font-size:15px; color:var(--txt); }
  .destaque-specs svg{ width:17px; height:17px; fill:none; stroke:var(--gold-dk); stroke-width:1.5; }
  .destaque-resumo{ margin-top:var(--e3); color:var(--txt-2); max-width:46ch; }
  .destaque-acoes{ display:flex; flex-wrap:wrap; gap:12px; margin-top:var(--e4); }

  /* ══ A HOME MOSTRA SÓ OS PRIMEIROS ══════════════════════
     O corte é por posição, não por classe no HTML, para que
     ordenar por preço mude QUAIS seis aparecem. O site.js tira
     .limitada assim que entra filtro. */
  .grade.limitada > .card:nth-child(n+7){ display:none; }
  .ver-todos{ display:flex; justify-content:center; margin-top:var(--e5); }
  .ver-todos[hidden]{ display:none; }
  .btn-mini{ padding:12px 26px; font-size:11px; letter-spacing:.16em; }
}

/* ══ MOTION ═══════════════════════════════════════════════
   Um elemento, um motor. O reveal .rv é do IntersectionObserver
   do site.js; o GSAP ignora quem tem .rv. Os dois no mesmo
   elemento já deixaram uma seção inteira em opacity:0.
   ═══════════════════════════════════════════════════════════ */
@layer motion{
  /* nasce visível: só o JS esconde para depois revelar.
     Sem isso, JS bloqueado = metade da página invisível para sempre. */
  .rv{ transition:opacity var(--t-entra) var(--ease-suave), transform var(--t-entra) var(--ease-suave); }
  .js .rv{ opacity:0; transform:translateY(16px); }
  .js .rv.ver{ opacity:1; transform:none; }
  .rv-1{ transition-delay:.06s } .rv-2{ transition-delay:.12s } .rv-3{ transition-delay:.18s }

  /* stagger de 60ms entre cards — o truque mais barato de sofisticação */
  .grade .card:nth-child(1){ transition-delay:0s } .grade .card:nth-child(2){ transition-delay:.06s }
  .grade .card:nth-child(3){ transition-delay:.12s } .grade .card:nth-child(4){ transition-delay:.18s }
  .grade .card:nth-child(5){ transition-delay:.24s } .grade .card:nth-child(6){ transition-delay:.3s }
  .grade .card:nth-child(n+7){ transition-delay:.36s }

  @keyframes corre{ 0%{transform:translateX(-100%)} 55%{transform:translateX(0)} 100%{transform:translateX(100%)} }
  @keyframes pulsa{ 0%{transform:scale(1)} 45%{transform:scale(1.22)} 100%{transform:scale(1)} }
  @keyframes sobe{ to{ opacity:1; transform:none } }
  @keyframes sai{ to{ opacity:0; transform:translateY(-8px) } }
  @keyframes entra{ from{ opacity:0; transform:translateY(10px) } }

  /* transição entre páginas, nativa */
  @view-transition{ navigation:auto; }
  @media (prefers-reduced-motion:no-preference){
    ::view-transition-old(root){ animation:sai .22s var(--ease-suave) both; }
    ::view-transition-new(root){ animation:entra .34s var(--ease-suave) both; }
  }

  /* números da ficha técnica: o GSAP conta até o valor */
  .contagem{ font-family:var(--serif); font-size:clamp(2.2rem,4vw,3.2rem); line-height:1; display:block; }
  .contagem + .rotulo{ display:block; margin-top:10px; }

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
    .rv,.js .rv{ opacity:1; transform:none; }
    .js .palavra > i{ transform:none; }
    .progresso-topo{ display:none; }
    .palco-rolar .linha::after{ transform:none; }
  }
}

/* ══ RESPOSTA ═════════════════════════════════════════════
   Larguras medidas fotografando o site, não escolhidas no olho:
   cada quebra aqui conserta um defeito visto em 390, 768, 1024
   e 1440. Ordem: do maior para o menor.
   ═══════════════════════════════════════════════════════════ */
@layer resposta{

  /* o cabeçalho colidia entre 900 e 1180px: o subtítulo da marca
     entrava por baixo de "COMPRAR" e "QUERO VENDER" quebrava em duas linhas */
  @media (max-width:1180px){
    .marca-sub{ display:none; }
    .topo nav{ gap:var(--e3); }
    .topo nav a.link{ font-size:12px; letter-spacing:.09em; }
  }
  @media (max-width:1000px){
    .busca{ grid-template-columns:repeat(2,1fr); }
    .busca .enviar{ grid-column:1/-1; padding:18px; justify-content:center; }
    .busca .avancado{ grid-template-columns:repeat(2,1fr); }

    /* o texto do hero caía sobre o céu claro da foto */
    .palco-veu{
      background:
        linear-gradient(90deg,rgba(12,13,17,.86) 0%,rgba(12,13,17,.62) 55%,rgba(12,13,17,.36) 100%),
        linear-gradient(to top,rgba(12,13,17,.84) 0%,rgba(12,13,17,.14) 52%);
    }
    .palco-in{ padding-block:clamp(72px,10vh,120px) var(--e3); }

    /* o preço e o botão ficavam no fim da página no tablet */
    .imovel{ grid-template-columns:1fr; gap:var(--e4); }
    .imovel > .cabeca{ grid-column:1; grid-row:1; margin-bottom:var(--e2); }
    .imovel > .lateral{ grid-column:1; grid-row:2; margin-top:var(--e2); position:static; }
    .imovel > .corpo-imovel{ grid-column:1; grid-row:3; }
    .imovel > .cabeca h1{ max-width:24ch; }
    .caixa .acoes{ grid-template-columns:1fr 1fr; }
  }
  /* entre 760 e 1000px os chips quebravam em três linhas e empurravam a grade
     para baixo da dobra: viram fila que rola, como nos portais */
  @media (max-width:1000px){
    .chips{
      flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-block:2px;
      scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
      /* o fade na borda avisa que a fila continua — sem ele o chip cortado parece defeito */
      mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent);
      -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent);
    }
    .chips::-webkit-scrollbar{ display:none; }
    .chip,.chips .divisor{ flex:0 0 auto; }
    .chip{ scroll-snap-align:start; }
  }
  @media (max-width:980px){ .rodape .grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:900px){ .topo nav a.link{ display:none; } }

  /* a galeria abria um buraco preto no celular quando as variantes
     por quantidade de foto venciam a media query */
  @media (max-width:820px){
    .galeria{ grid-template-columns:1fr 1fr; grid-template-rows:auto; height:auto; }
    .galeria .g1{ grid-column:1/-1; grid-row:auto; aspect-ratio:16/10; }
    .galeria .g:not(.g1){ aspect-ratio:1/1; }
    .galeria .g:nth-child(n+4){ display:none; }
    .tag{ padding:5px 10px; font-size:9px; letter-spacing:.14em; }
    .imovel .tags{ gap:6px; }
  }

  @media (max-width:760px){
    /* no celular o cabeçalho fica só com a marca: botão ali sempre fica espremido */
    .topo .btn-zap{ display:none; }
    .marca img{ height:22px; }
    .zap-flut{ display:none; }
    .barra-fixa{ display:flex; gap:10px; padding-inline:16px; }
    .barra-fixa .marca-min span{ display:none; }
    .barra-fixa .marca-min b{ font-size:14px; letter-spacing:.24em; }
    .barra-fixa .preco{ font-size:1.1rem; }
    .barra-fixa .btn{ white-space:nowrap; padding:13px 18px; font-size:11px; letter-spacing:.14em; }

    .palco{ min-height:auto; }
    .palco-in{ padding-block:clamp(64px,13vh,110px) var(--e3); }
    .palco h1{ font-size:clamp(2.1rem,9vw,3rem); }
    .palco .sub{ font-size:15.5px; }
    .palco-rolar{ display:none; }
    .palco-pe{ padding-block:var(--e2) var(--e3); }

    /* a busca não pode virar uma torre: duas colunas no celular */
    .busca-palco{ background:color-mix(in srgb, var(--ink) 68%, transparent); }
    .busca{ grid-template-columns:1fr 1fr; }
    .busca .campo{ padding:12px 14px; border-bottom:1px solid var(--linha); }
    .busca-palco .campo{ border-bottom-color:rgba(247,244,238,.12); }
    .busca .campo:nth-of-type(2n){ border-right:0; }
    .busca label{ font-size:8.5px; letter-spacing:.16em; }
    .busca input,.busca select{ font-size:14.5px; }
    .busca .enviar{ padding:16px; }
    .busca .avancado{ grid-template-columns:1fr 1fr; }
    .busca .mais{ padding:10px; font-size:9.5px; }

    /* barra de filtros vira fila que rola, como nos portais:
       empilhada, comia meia tela antes do primeiro imóvel */
    .barra-filtros{
      gap:10px; padding-block:10px; align-items:stretch; flex-direction:column;
      margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad);
    }
    .barra-filtros .ordem{ margin-left:0; justify-content:space-between; }
    .secao-topo{ margin-bottom:var(--e3); }
    .ordenar{ padding:9px 32px 9px 12px; font-size:12.5px; }
  }

  @media (max-width:620px){
    .numeros{ grid-template-columns:repeat(2,1fr); }
    .numeros b{ font-size:1.5rem; }
    .rodape .grid{ grid-template-columns:1fr; gap:var(--e4); }
    .rodape .marca-rodape img{ width:190px; }
  }

  @media (max-width:520px){
    .caixa .acoes{ grid-template-columns:1fr; }
    .card .local{ font-size:11px; }
  }
}

/* ══ ABERTURA E CORRETORA: movimento reduzido e telas estreitas ══ */
@layer motion{
  @media (prefers-reduced-motion:reduce){
    .palco-fundo .pf-b{ animation:none; opacity:0; }
    .cortina{ animation:none; display:none; }
    .cortina-nome i, .cortina-sub{ opacity:1; transform:none; animation:none; }
    .cortina-fio{ transform:scaleX(1); animation:none; }
    .bastidores-in{ animation:none; }
  }
}

@layer resposta{
  @media (max-width:900px){
    .destaque-in{ grid-template-columns:1fr; gap:var(--e4); }
    .destaque-preco{ margin-top:var(--e2); }
    .destaque-acoes .btn{ flex:1 1 auto; justify-content:center; }
    .grade.limitada > .card:nth-child(n+5){ display:none; }

    .corretora-in{ grid-template-columns:1fr; gap:var(--e5); }
    .corretora-foto{ order:-1; max-width:460px; margin-inline:auto; width:100%; }
    .corretora-foto img{ border-radius:200px 200px 10px 10px; }
    .corretora-moldura{ inset:16px -16px -16px 16px; border-radius:200px 200px 10px 10px; }
    .corretora-selos{ grid-template-columns:1fr; gap:var(--e2); }
    .corretora-selos li{ display:flex; gap:var(--e2); align-items:baseline; justify-content:space-between; }
    .corretora-selos span{ margin-top:0; text-align:right; }
    .bastidores-in{ animation-duration:46s; }
  }
  @media (max-width:560px){
    .cortina-nome{ letter-spacing:.16em; padding-left:.16em; }
    .bastidores figure{ width:148px; }
  }
}