/* ==========================================================================
   Tema Calina Bassi Investimentos Imobiliários
   Paleta e tipografia conforme o manual de marca (proposta_iv.pdf) e o
   protótipo aprovado (Site.pdf).
   ========================================================================== */

/* A família dos títulos é "Times Sans Serif" (Mundo da Lua): a métrica do
   Times New Roman com as serifas removidas. É a fonte da peça aprovada; a
   serifada que estava aqui antes tinha o mesmo esqueleto e a mesma largura,
   e por isso passava nas medições, mas o desenho da letra é outro. Era essa
   a diferença que sobrava na frase do topo.

   Nenhum provedor público serve esta família, então ela vai junto do tema.
   O arquivo traz fsType 0 (incorporação livre) e a CSP já permite fontes
   da própria origem. */
@font-face {
  font-family: "Times Sans Serif";
  src: url("/assets/calina-bassi/static/fonts/times-sans-serif.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Paleta de marca */
  /* Amostrados no `cliente/Site.pdf`: a cor dominante de cada região, não o
     tom que a paleta de marca sugeria. O dourado já batia; os outros não. */
  --navy:      #232E47;   /* faixas escuras e rodapé do CTA */
  --navy-mid:  #395681;   /* títulos de seção e do cartão */
  --navy-soft: #4E6791;
  --gold:      #E0C58D;   /* botão e faixa do rodapé */
  --gold-deep: #C9A863;
  --nude:      #E7DFDA;   /* faixa de "Destaque locação" */
  --nude-soft: #E0D5CE;   /* cartão do "Sobre" */
  /* Medido no material: bairro do cartão e fundo do "Saiba mais". */
  --mauve:     #958688;
  --cream:     #F4EFE9;
  --white:     #FFFFFF;

  --ink:       var(--navy);
  --ink-muted: #5B6480;
  --line:      rgba(31, 39, 76, .14);

  /* Tipografia: serif de display para títulos, Montserrat para o resto */
  /* Times New Roman.
     Não é escolha de gosto: a fonte embutida no PDF aprovado tem as
     métricas de avanço da Times (U .722, M .889, espaço .250), a mesma
     altura de caixa alta (1356/2048 = .662), o mesmo PANOSE e os mesmos
     contornos: o Q com cauda é idêntico. O nome no arquivo
     ("TimesSansSerif") é rótulo do exportador e não vale nada.

     Local primeiro, porque no Windows e no macOS ela existe e o resultado
     é exato. Tinos é o substituto métricamente compatível para quem não a
     tem: mesma largura de avanço, então a quebra de linha não muda. */
  --font-display: "Times Sans Serif", "Times New Roman", Times, serif;
  --font-body: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;

  --radius-sm: 6px;
  --radius:    14px;
  --radius-lg: 28px;

  --shadow-sm: 0 2px 10px rgba(31, 39, 76, .06);
  --shadow:    0 10px 34px rgba(31, 39, 76, .10);
  --shadow-lg: 0 26px 70px rgba(31, 39, 76, .16);

  /* Medido no material do cliente: a 1920px a página deixa ~75pt de margem,
     ou seja o conteúdo ocupa ~1770pt. Com 1240px sobrava mais de 340px de
     cada lado num monitor comum e a vitrine só cabia quatro cartões, onde o
     desenho pede cinco. */
  --wrap: 1800px;
  --wrap-read: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Rede de segurança para texto que vem do cadastro do cliente: e-mail,
   endereço de site, nome de condomínio. Uma palavra sem espaço maior que a
   coluna não quebra sozinha e escapa da tela -- foi o que o e-mail
   contato@cbinvestimentosimob.com.br (328px) fazia em /contato num telefone
   de 340px. `anywhere`, e não `break-word`, porque só `anywhere` reduz
   também o min-content, que é o piso usado por grid e flex. */
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* Foco visível para navegação por teclado. */
:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 3px;
}

.wrap { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; }

/* Duas larguras, porque as páginas fazem duas coisas diferentes.
   `--wrap` é a vitrine: home, busca, cabeçalho e rodapé, onde a largura vira
   mais um imóvel por linha. `--wrap-read` é a página que se lê: a ficha do
   imóvel, o "sobre", o contato. A 1800px o parágrafo passa de 200 caracteres
   por linha e o olho perde o começo da linha seguinte; a foto principal da
   ficha ficava mais alta que a tela. */
.wrap--read { width: min(100% - (var(--gutter) * 2), var(--wrap-read)); margin-inline: auto; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy); color: var(--cream);
  padding: .75rem 1.25rem; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- tipografia */

h1, h2, h3, h4 { margin: 0; font-weight: 400; }

.display {
  font-family: var(--font-display);
  /* 400: a fonte do material é Regular. O 300 de antes era da Cormorant,
     que tem peso leve; a Times não tem, e o navegador sintetizaria. */
  font-weight: 400;
  /* Sem tracking. Medi avanço por avanço no material e eles são os da
     Times pura: a frase não tem espacejamento nenhum. O .04em que estava
     aqui alargava a linha em 36px. */
  letter-spacing: 0;
  /* Kerning fica ligado: medindo as duas linhas da chamada, com ele o erro
     é de +0,3 e -4,5; sem ele, +0,3 e +10,5. O resíduo vem de a tabela de
     pares da Times do sistema diferir um pouco da que o PDF usou. */
  line-height: 1.12;
  text-transform: uppercase;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  letter-spacing: 0;
  text-transform: uppercase;
  /* --navy-mid e não --navy: o material usa #395681 nos títulos de seção,
     que é este tom, e não o #1F274C quase preto das superfícies escuras.
     Numa serifada de peso 300 e 55pt a diferença aparece: o tom mais claro
     deixa o traço fino respirar em vez de parecer um título mal impresso. */
  color: var(--navy-mid);
}

.eyebrow {
  font-size: .7rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
}

/* ------------------------------------------------------------------- botões */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .95rem 1.9rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease,
              transform .2s ease;
}
.btn:active { transform: translateY(1px); }

.btn--gold { background: var(--gold); color: var(--navy); }
.btn--gold:hover { background: var(--gold-deep); }

.btn--navy { background: var(--navy); color: var(--cream); }
.btn--navy:hover { background: var(--navy-mid); }

.btn--nude { background: var(--nude); color: var(--navy); padding: .6rem 1.15rem;
             font-size: .66rem; letter-spacing: .16em; }
.btn--nude:hover { background: var(--nude-soft); }

/* Os ícones são inline, com viewBox 24x24 e sem width/height. Sem uma regra
   de tamanho o SVG estica para preencher o espaço disponível -- era o que
   inflava o botão "Mais filtros" da busca para 164px de altura. Cada
   contexto de ícone no site tem a sua regra; faltava a dos botões. */
.btn svg { width: 17px; height: 17px; flex: none; }

.btn--ghost { background: transparent; border-color: var(--line); color: var(--navy); }
.btn--ghost:hover { border-color: var(--navy); }

.btn--ghost-light { background: transparent; border-color: rgba(244,239,233,.45);
                    color: var(--cream); }
.btn--ghost-light:hover { border-color: var(--cream); }

/* ---------------------------------------------------------------- cabeçalho */

.site-header {
  position: absolute; inset: 0 0 auto 0; z-index: 40;
  padding-block: 1.5rem;
}
.site-header--solid {
  position: sticky; top: 0;
  background: rgba(244, 239, 233, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}

.brand { display: flex; align-items: center; }
/* Assinatura inteira numa imagem só; a proporção vem do próprio arquivo. */
.brand__lockup { width: 230px; height: auto; display: block; }

.nav { display: flex; align-items: center; gap: 2.2rem; }
.nav__link {
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 500; padding-block: .35rem; position: relative;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: currentColor; transition: right .25s ease;
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { right: 0; }

.nav__phone { display: flex; align-items: center; gap: .5rem; font-size: .72rem;
              letter-spacing: .12em; }
.nav__phone svg { width: 17px; height: 17px; }

/* O cabeçalho é navy em toda parte, inclusive sobre a foto.
   Antes era creme sobre o hero, o que fazia sentido enquanto a foto estava
   centralizada e a serra escura ficava no topo. Ancorada no céu, o creme
   sumiu, e o material do cliente já desenhava o logo em navy ali. A sombra
   segura a leitura se a nuvem do dia estiver mais clara que o esperado. */
.site-header--over,
.site-header--solid { color: var(--navy); }
.site-header--over .nav__link { color: var(--navy); }
.site-header--over .brand,
.site-header--over .nav { filter: drop-shadow(0 1px 10px rgba(255,255,255,.55)); }

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  padding: .5rem; color: inherit;
}
.nav-toggle span {
  display: block; width: 26px; height: 1.5px; background: currentColor;
  margin: 5px 0; transition: transform .25s ease, opacity .25s ease;
}

/* ---------------------------------------------------------------------- hero */

.hero {
  position: relative;
  min-height: min(92vh, 880px);
  display: flex; flex-direction: column; justify-content: center;
  /* Ver GEOMETRIA DO MATERIAL, no fim do arquivo: acima de 1024px as
     medidas vêm do PDF aprovado. Aqui ficam só os valores de segurança
     para telas estreitas, que o material não cobre. */
  padding-block: clamp(5rem, 7vw, 7rem) clamp(4rem, 16vw, 15rem);
  color: var(--cream);
  isolation: isolate;
}
.hero__media {
  position: absolute; inset: 0; z-index: -2; overflow: hidden;
  background: linear-gradient(160deg, #2c3a63 0%, var(--navy) 60%, #161d3a 100%);
}
/* Ancorada no topo, não no centro.
   A foto é uma aérea em três faixas (céu, serra, cidade) e cada uma
   sustenta um elemento: o logo navy se apoia no céu claro, a chamada branca
   na massa escura da serra, a busca na cidade. Centralizado, o `cover`
   comia o céu e jogava a serra para fora do quadro: o logo caía sobre a
   montanha e a chamada sobre os telhados claros, sem contraste nenhum. */
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
/* O degradê termina em navy opaco, não translúcido: a faixa navy da seção
   seguinte começa logo abaixo, e parando em .72 a foto morria num corte seco
   contra ela. Fechando em 1 a fotografia dissolve na faixa e as duas viram
   uma superfície só, que é como o material do cliente desenha. */
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(31,39,76,.06) 0%,
    rgba(31,39,76,.10) 22%,
    rgba(31,39,76,.30) 46%,
    rgba(31,39,76,.80) 80%,
    var(--navy) 100%);
}
.hero__inner { text-align: center; }

/* Herda tudo de `.display`: a serifada de exibição, peso 300, caixa alta,
   a mesma voz de "Destaque venda" e "Calina Bassi". As fontes embutidas no
   PDF da marca confirmam: a chamada e os títulos de seção são o mesmo tipo.
   De longe, e numa imagem reduzida, ela passa por uma sans pesada, porque as
   serifas são finas e somem; de perto o contraste entre haste e filete é
   inconfundível.

   O tamanho vem do material: 43,6pt numa página de 1920, daí o teto de
   2.75rem, que dá 44px na mesma largura.

   A sombra é mais forte do que pareceria necessário porque o traço fino de
   uma serifada de alto contraste desaparece sobre fotografia bem mais
   facilmente que um traço grosso. */
.hero__title {
  /* Branco puro, não o creme que o resto do hero herda. O material traz
     #FFFFFF aqui e #F4EFE9 em nenhum lugar sobre a foto, e faz sentido: o
     creme é um branco quente, feito para superfície de papel, e sobre uma
     fotografia de céu ele lê como cinza sujo em vez de destaque. */
  color: var(--white);
  font-size: clamp(1.75rem, 2.4vw, 2.75rem);
  /* A quebra é escolhida à mão no painel (ver `lines` no renderer), então
     aqui a largura só não pode forçar uma quebra extra. */
  max-width: 100%;
  margin-inline: auto;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .46);
}

/* --------------------------------------------------------------- busca (hero) */

.searchbar {
  margin-top: 3rem;
  /* O contêiner ficou largo para a vitrine caber cinco cartões, mas a busca
     não acompanha: no material ela ocupa ~76% da página contra os ~92% do
     painel. Esticada até a borda, os cinco controles viram faixas soltas com
     vão demais entre eles. */
  max-width: 1460px;
  margin-inline: auto;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: .75rem;
  display: grid;
  grid-template-columns: minmax(150px, .85fr) minmax(150px, .9fr) minmax(200px, 1.6fr) auto auto;
  gap: .6rem;
  align-items: stretch;
  text-align: left;
  color: var(--navy);
}

.field {
  display: flex; flex-direction: column; justify-content: center;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .5rem .95rem;
  min-height: 62px;
  position: relative;
}
.field__label { font-size: .66rem; color: var(--ink-muted); letter-spacing: .04em; }
.field select, .field input {
  border: 0; background: none; font: inherit; color: var(--navy);
  padding: 0; width: 100%; appearance: none;
}
.field select:focus, .field input:focus { outline: none; }
.field--select::after {
  content: ""; position: absolute; right: 1rem; top: 50%;
  width: 8px; height: 8px; border-right: 1.5px solid var(--navy-mid);
  border-bottom: 1.5px solid var(--navy-mid);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
/* O <details> ocupa o lugar do campo e o <summary> vira a face dele: mesmo
   contorno, mesma altura, mesmo empilhamento de rótulo e valor. A face não
   repete borda nem recuo: quem os tem é o .field em volta.

   Os seletores citam .field e .field--escolha juntos de propósito. Com uma
   classe só eles empatavam em especificidade com `.escolha > summary`, que
   vem depois no arquivo e vencia por ordem: o campo do topo ganhava uma
   segunda borda por dentro e o valor descia para fora da caixa. */
.field.field--escolha > summary {
  list-style: none; cursor: pointer;
  /* `center` escrito, não `inherit`: com `inherit` o valor não chegava e o
     miolo caía no topo, deixando "Tipo Imóvel" para fora da caixa.
     `flex: 1` no lugar de `height: 100%` porque o rosto precisa ocupar a
     altura do campo, e a porcentagem resolvia contra a caixa errada. */
  display: flex; flex-direction: column; justify-content: center;
  /* `.escolha > summary` declara `align-items: center` e, numa coluna,
     isso centra o texto na horizontal: "Pretensão" e "Tipo Imóvel"
     apareciam no meio do campo, e no material os dois começam colados no
     recuo da esquerda. `stretch` também é o que dá largura ao valor para
     as reticências funcionarem quando a escolha é múltipla. */
  align-items: stretch;
  flex: 1; min-height: 0; align-self: stretch;
  margin: 0; padding: 0;
  border: 0; background: none; font: inherit; color: inherit;
}
.field.field--escolha > summary::-webkit-details-marker { display: none; }
.field.field--escolha > summary::marker { content: ""; }
/* A seta já é desenhada por .field--select; a do componente sobraria. */
.field.field--escolha > summary::after { content: none; }
.field.field--escolha > .escolha__lista { top: calc(100% + .5rem); }
.field__valor { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A lista abre para fora da barra: nada pode recortá-la. */
.searchbar { overflow: visible; }

.field--search { flex-direction: row; align-items: center; gap: .7rem; }
.field--search svg { width: 18px; height: 18px; color: var(--ink-muted); flex: none; }
.field input::placeholder { color: #9aa1b4; }

.searchbar .btn { white-space: nowrap; }

/* --------------------------------------------------------------- seções base */

.section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section--navy { background: var(--navy); color: var(--cream); }
.section--nude { background: var(--nude); color: var(--navy); }
.section--cream { background: var(--cream); }

/* Painel branco que sobrepõe a faixa navy, como no protótipo. */
.panel {
  background: #FBF9F7;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(2rem, 4.5vw, 3.75rem);
}
.panel--overlap { margin-top: clamp(-7rem, -8vw, -4rem); position: relative; z-index: 5; }

/* Faixa que hospeda o painel branco sobreposto.
   O painel sobe pela margem negativa, então o respiro de cima já está
   consumido; embaixo ele precisa sobrar, senão o cartão branco encosta
   direto no fundo da seção seguinte e as duas parecem coladas. Um pouco
   menor que o respiro padrão da seção, para a faixa navy não dominar. */
.section--hosts-panel { padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }

.section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2.5rem;
}

.rule { border: 0; border-top: 1px solid var(--line); margin-block: clamp(2.5rem, 5vw, 4rem); }

/* ----------------------------------------------------------------- catálogo */

/* Cinco colunas a partir do desktop, como no material: com o painel em
   1680pt úteis e vão de 40px, cada cartão fica em ~304pt, e o desenho traz
   302. Abaixo disso a contagem volta a ser automática, porque cinco cartões
   num tablet virariam cinco tiras estreitas demais para a foto informar algo.

   `minmax(0, 1fr)` e não `1fr`: o piso de um 1fr é o min-content do conteúdo,
   e um título longo de imóvel empurraria a coluna para fora do painel. */
.grid-properties {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(215px, 100%), 1fr));
  gap: clamp(1.25rem, 2.4vw, 2.5rem);
}
/* 1440px e não 1280: a 1280 os cinco cartões caem para ~189px de largura,
   e a foto (que é o que faz a pessoa clicar) deixa de informar. Abaixo
   daqui o auto-fill devolve quatro colunas de ~242px, que respiram. */
@media (min-width: 1440px) {
  .grid-properties { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.card { display: flex; flex-direction: column; gap: .85rem; }

.card__media {
  position: relative;
  aspect-ratio: 4 / 3.4;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--nude-soft);
}
.card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.card:hover .card__media img { transform: scale(1.045); }

.card__badge {
  position: absolute; top: .7rem; left: .7rem;
  background: rgba(31,39,76,.86); color: var(--cream);
  font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
  padding: .35rem .65rem; border-radius: 3px;
}
.card__badge--gold { background: var(--gold); color: var(--navy); }

.card__title {
  font-size: 1.06rem; font-weight: 700; line-height: 1.24;
  color: var(--navy-mid); letter-spacing: -.01em;
}
.card:hover .card__title { color: var(--navy); }

.card__where {
  display: flex; align-items: center; gap: .4rem;
  font-size: .82rem; color: var(--ink-muted);
}
.card__where svg { width: 14px; height: 14px; flex: none; }

.card__price { font-size: .95rem; font-weight: 600; color: var(--navy); }
.card__price small { font-weight: 400; color: var(--ink-muted); font-size: .74rem; }

.card__specs {
  display: flex; flex-wrap: wrap; gap: .9rem;
  font-size: .78rem; color: var(--ink-muted);
}
.card__specs span { display: inline-flex; align-items: center; gap: .3rem; }

.card__cta { margin-top: auto; align-self: flex-start; }

/* No catálogo os cartões vêm do cadastro e cada um tem uma quantidade
   diferente de linha: bairro que quebra em duas, imóvel sem preço, terreno
   sem dormitório. Sem piso por faixa, título, valor e botão ficavam em
   alturas diferentes de coluna para coluna. Cada faixa ganha a altura do
   seu pior caso e o botão desce para o pé do cartão.

   Só aqui: a vitrine da home tem a geometria da peça, medida linha a
   linha, e um piso a mais empurraria tudo o que vem depois. */
.layout-search .grid-properties { align-items: stretch; }
.layout-search .grid-properties > .card { height: 100%; }
.layout-search .card__title {
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
  line-height: 1.24; min-height: 2.48em;
}
.layout-search .card__where {
  align-items: flex-start; line-height: 1.35; min-height: 2.7em;
}
.layout-search .card__where svg { margin-top: .15em; }
.layout-search .card__price { line-height: 1.4; min-height: 1.4em; }
.layout-search .card__specs { line-height: 1.4; min-height: 1.4em; }
.layout-search .card__cta { margin-top: auto; }

.empty {
  text-align: center; padding: 4rem 1rem; color: var(--ink-muted);
  border: 1px dashed var(--line); border-radius: var(--radius);
}

/* ---------------------------------------------------------- página de busca */

.layout-search { display: grid; grid-template-columns: 268px 1fr; gap: 2.5rem; align-items: start; }

.filters {
  background: var(--white); border-radius: var(--radius);
  padding: 1.5rem; box-shadow: var(--shadow-sm);
  position: sticky; top: 6rem;
}
/* No computador o painel está sempre aberto e o cabeçalho é só um rótulo:
   `pointer-events: none` para o clique não fechar um painel que deveria
   ficar fixo, e o marcador nativo do <details> some. */
.filters > summary {
  list-style: none; pointer-events: none;
  display: flex; align-items: center; justify-content: space-between;
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  margin-bottom: 1.25rem; color: var(--ink-muted);
}
.filters > summary::-webkit-details-marker { display: none; }
.filters > summary svg { width: 17px; height: 17px; display: none; }
.filters label { display: block; font-size: .74rem; color: var(--ink-muted);
                 margin-bottom: .3rem; }
.filters .control { margin-bottom: 1.1rem; }
/* A seta nativa do <select> é cinza de sistema e destoava dos campos da
   home, que têm a seta desenhada. Repetimos a mesma aqui, em SVG embutido,
   sem arquivo extra e herdando o navy da marca. */
.filters select, .filters input {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .6rem .7rem; font: inherit; font-size: .88rem; background: var(--white);
  color: var(--navy);
}
.filters select, .sort-select {
  appearance: none; -webkit-appearance: none;
  padding-right: 2.1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F274C' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .6rem center;
  background-size: 17px 17px;
}
.filters .row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6rem; }
.filters .control__rotulo { display: block; font-size: .74rem; color: var(--ink-muted);
                            margin-bottom: .3rem; }

/* -------------------------------------------------------- lista de escolha

   Substitui o <select>. O nativo abre a lista do sistema operacional,
   colada na margem, com o realce azul do SO e a fonte do sistema, e não
   aceita marcar vários sem Ctrl. Aqui é um <details> com caixas ou botões
   de rádio: abre e fecha sozinho, o teclado percorre normalmente, funciona
   com script desligado e marcar vários é só clicar. */

.escolha { position: relative; }
.escolha > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: .5rem;
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .6rem 2.1rem .6rem .7rem; font-size: .88rem;
  background: var(--white); color: var(--navy);
}
.escolha > summary::-webkit-details-marker { display: none; }
.escolha > summary::marker { content: ""; }
.escolha > summary:focus-visible { outline: 2px solid var(--navy-mid); outline-offset: 2px; }
/* Seta desenhada, como a dos campos da home. */
.escolha > summary::after {
  content: ""; position: absolute; right: .85rem; top: 50%;
  width: 8px; height: 8px;
  border-right: 1.6px solid var(--navy-mid); border-bottom: 1.6px solid var(--navy-mid);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .18s ease; pointer-events: none;
}
.escolha[open] > summary::after { transform: translateY(-25%) rotate(-135deg); }

.escolha__valor { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Na barra da home o valor vai até o recuo do campo, e o recuo termina
   debaixo da seta: o resumo de várias opções ("Casa · Terreno · +2") era
   cortado por cima do "v". A margem é só o que a seta ocupa mais uma folga.
   Quem tem lista própria (/imoveis) já reserva 2.1rem no summary e não
   precisa disto. */
.escolha.field--escolha[data-multi] > summary > .field__valor { margin-right: .85rem; }

.escolha__lista {
  position: absolute; z-index: 60; top: calc(100% + .35rem); left: 0;
  /* `max-content` e não 100%: o gatilho de "Ordenar" tem a largura da
     palavra mais curta, e a lista herdava isso, partindo "Destaques" ao
     meio. A lista pede a largura da opção mais longa e só depois é limitada. */
  width: max-content; min-width: 100%; max-width: min(24rem, 86vw);
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  padding: .35rem; max-height: 17rem; overflow-y: auto;
}
.escolha__lista--alta { max-height: 24rem; }

.escolha .escolha__item {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .6rem; border-radius: 4px; cursor: pointer;
  font-size: .88rem; line-height: 1.25; color: var(--navy);
}
.escolha .escolha__item:hover { background: var(--nude); }
.escolha .escolha__item span { min-width: 0; overflow-wrap: anywhere; }
/* Caixa desenhada, não a nativa. A nativa reserva 16px mas pinta um quadrado
   menor, com folga interna própria: o vão de .6rem virava 3px na tela e a
   marca ficava 4px acima do texto. Desenhando, a caixa é exatamente o que
   se vê, o vão é o vão e o alinhamento é o do flex. */
.escolha .escolha__item input {
  appearance: none; -webkit-appearance: none;
  width: 1.05rem; height: 1.05rem; flex: none; margin: 0; padding: 0;
  border: 1.5px solid var(--line); border-radius: 4px;
  background: var(--white); cursor: pointer;
  display: grid; place-content: center;
  transition: background .15s ease, border-color .15s ease;
}
.escolha .escolha__item input[type="radio"] { border-radius: 50%; }
.escolha .escolha__item input::before {
  content: ""; width: .55rem; height: .55rem;
  transform: scale(0); transition: transform .12s ease;
  background: var(--white);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.escolha .escolha__item input[type="radio"]::before {
  clip-path: none; border-radius: 50%; width: .45rem; height: .45rem;
}
.escolha .escolha__item input:checked { background: var(--navy-mid); border-color: var(--navy-mid); }
.escolha .escolha__item input:checked::before { transform: scale(1); }
.escolha .escolha__item input:focus-visible { outline: 2px solid var(--navy-mid); outline-offset: 2px; }
.escolha .escolha__item:has(input:checked) { background: var(--nude-soft); font-weight: 600; }

/* Contagem quando há mais de um marcado. */
.escolha__conta {
  margin-left: auto; flex: none;
  background: var(--navy-mid); color: var(--white);
  font-size: .68rem; font-weight: 600; line-height: 1;
  padding: .25rem .4rem; border-radius: 999px;
}

.escolha--ordenar > summary { border-radius: 6px; padding: .5rem 2rem .5rem .7rem; font-size: .85rem; }
.escolha--ordenar .escolha__lista { left: auto; right: 0; }

.sort-select {
  border: 1px solid var(--line); border-radius: 6px;
  padding: .5rem .7rem; font: inherit; font-size: .85rem;
  background: var(--white); color: var(--navy);
}

.results-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem;
}
.results-count { font-size: .86rem; color: var(--ink-muted); }

.pagination { display: flex; gap: .4rem; justify-content: center; margin-top: 3rem;
              flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: .85rem; padding-inline: .5rem;
}
.pagination .is-current { background: var(--navy); color: var(--cream);
                          border-color: var(--navy); }

/* ---------------------------------------------------------- página do imóvel */

.detail-head { padding-block: 2.5rem 1.5rem; }
.breadcrumb { font-size: .76rem; color: var(--ink-muted); margin-bottom: .9rem; }
.breadcrumb a:hover { color: var(--navy); text-decoration: underline; }

.gallery { display: grid; gap: .6rem; grid-template-columns: 2fr 1fr;
           border-radius: var(--radius); overflow: hidden; }
.gallery [hidden] { display: none; }

.gallery__main { aspect-ratio: 4 / 3; background: var(--nude-soft);
                 position: relative; display: block; overflow: hidden; cursor: zoom-in; }
.gallery__main img { width: 100%; height: 100%; object-fit: cover;
                     transition: transform .5s ease; }
.gallery__main:hover img { transform: scale(1.02); }

/* Sinal de que a foto amplia. Aparece no hover; no toque, some por não haver
   hover, mas lá o gesto de tocar a imagem já é natural. */
.gallery__zoom {
  position: absolute; right: .9rem; bottom: .9rem;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.92); color: var(--navy);
  opacity: 0; transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
}
.gallery__zoom svg { width: 18px; height: 18px; }
.gallery__main:hover .gallery__zoom,
.gallery__main:focus-visible .gallery__zoom { opacity: 1; transform: none; }

/* A altura da grade vem do aspect-ratio da capa, e as duas laterais dividem
   exatamente esse espaço. Para isso as fotos laterais não podem participar do
   cálculo de altura: no fluxo normal o navegador usa a proporção natural de
   cada arquivo, a coluna cresce além da capa e as três imagens deixam de ter o
   mesmo tamanho. Daí o position:absolute nas miniaturas e o minmax(0, 1fr) --
   1fr sozinho tem mínimo automático, que é o próprio conteúdo. */
.gallery__side { display: grid; gap: .6rem;
                 grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
                 min-height: 0; }
.gallery__thumb { margin: 0; background: var(--nude-soft); overflow: hidden;
                  position: relative; display: block; cursor: zoom-in;
                  min-height: 0; }
.gallery__thumb img { position: absolute; inset: 0;
                      width: 100%; height: 100%; object-fit: cover;
                      transition: transform .5s ease; }
/* Imóvel com duas fotos tem uma única miniatura: sem isto ela ficaria só na
   primeira linha e sobraria meio bloco de fundo vazio ao lado da capa. */
.gallery__thumb:only-child { grid-row: 1 / -1; }
.gallery__thumb:hover img { transform: scale(1.03); }
.gallery__more {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(31,39,76,.62); color: var(--cream);
  font-size: .82rem; letter-spacing: .1em; font-weight: 500;
  transition: background-color .2s ease;
}
.gallery__thumb:hover .gallery__more { background: rgba(31,39,76,.72); }

/* ------------------------------------------------------ foto ampliada -- */

body.has-lightbox { overflow: hidden; }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(16, 20, 38, .95);
  display: grid;
  /* minmax(0, 1fr) e não 1fr: uma faixa 1fr tem altura mínima automática, o
     que deixaria a foto empurrar o layout e passar por baixo das miniaturas. */
  grid-template-rows: auto minmax(0, 1fr) auto;
  animation: lb-fade .18s ease;
}
.lightbox[hidden] { display: none; }
@keyframes lb-fade { from { opacity: 0; } }

.lightbox__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem clamp(1rem, 3vw, 1.75rem);
  color: rgba(244, 239, 233, .82);
}
.lightbox__counter { font-size: .82rem; letter-spacing: .1em;
                     font-variant-numeric: tabular-nums; }

.lightbox__btn {
  background: rgba(255,255,255,.1); border: 0; color: var(--cream);
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}
.lightbox__btn:hover { background: rgba(255,255,255,.2); }
.lightbox__btn:active { transform: scale(.94); }
.lightbox__btn svg { width: 22px; height: 22px; }
.lightbox__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.lightbox__stage {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: 0 clamp(3.5rem, 8vw, 6rem);
  min-height: 0; overflow: hidden;
}
.lightbox__figure {
  margin: 0; min-height: 0; max-width: 100%; max-height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.lightbox__figure img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}

.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%);
                 width: 52px; height: 52px; }
.lightbox__nav:active { transform: translateY(-50%) scale(.94); }
.lightbox__nav--prev { left: clamp(.5rem, 2vw, 1.5rem); }
.lightbox__nav--next { right: clamp(.5rem, 2vw, 1.5rem); }

.lightbox__thumbs {
  display: flex; gap: .5rem; overflow-x: auto;
  padding: 1rem clamp(1rem, 3vw, 1.75rem);
  justify-content: center; scrollbar-width: thin;
  flex: none;
}
.lightbox__thumb {
  flex: 0 0 74px; height: 56px; padding: 0; cursor: pointer;
  border: 2px solid transparent; border-radius: 6px; overflow: hidden;
  background: none; opacity: .5;
  transition: opacity .18s ease, border-color .18s ease;
}
.lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lightbox__thumb:hover { opacity: .85; }
.lightbox__thumb.is-active { opacity: 1; border-color: var(--gold); }
.lightbox__thumb:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.detail-body { display: grid; grid-template-columns: 1fr 340px; gap: 3rem;
               align-items: start; padding-block: 2.5rem 4rem; }

.specs { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem;
         padding-block: 1.5rem; border-block: 1px solid var(--line);
         margin-block: 1.75rem; }
.spec { display: flex; flex-direction: column; gap: .15rem; }
.spec__value { font-size: 1.12rem; font-weight: 600; }
.spec__label { font-size: .72rem; color: var(--ink-muted); letter-spacing: .04em; }

.prose { line-height: 1.8; color: #3d4560; }

.amenities { list-style: none; padding: 0; margin: 1.5rem 0 0;
             display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
             gap: .6rem; }
.amenities li { display: flex; align-items: center; gap: .55rem; font-size: .89rem; }
.amenities li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold-deep); flex: none;
}

.aside-card {
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.75rem;
  position: sticky; top: 6rem;
}
.aside-card__price { font-family: var(--font-display); font-size: 2rem;
                     letter-spacing: .01em; color: var(--navy); }
.aside-card__row { display: flex; justify-content: space-between;
                   font-size: .84rem; color: var(--ink-muted);
                   padding-block: .45rem; }
.aside-card .btn { width: 100%; margin-top: .5rem; }

/* -------------------------------------------------------------------- mapa */

.map {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
}

/* O MapLibre mede o container ao iniciar: a altura precisa ser concreta. */
.map__canvas {
  height: 420px;
  background: #eceae7;
  position: relative;
  z-index: 0; /* abaixo do cabeçalho fixo e do botão flutuante */
}
.map__fallback { padding: 2rem; text-align: center; color: var(--ink-muted); }

/* Aviso enquanto o zoom pela roda está travado. */
.map__hint {
  position: absolute; inset: auto 0 0 0; z-index: 3;
  background: rgba(31, 39, 76, .74); color: var(--cream);
  font-size: .78rem; text-align: center; padding: .55rem;
  pointer-events: none;
  transition: opacity .2s ease;
}
.map__hint.is-hidden { opacity: 0; }

/* Pino da marca, com halo suave: o realce que os portais usam para o olho
   ir direto ao imóvel. */
.map-pin { position: relative; line-height: 0; cursor: pointer; }
.map-pin svg { position: relative; z-index: 2;
               filter: drop-shadow(0 4px 8px rgba(31, 39, 76, .3)); }
.map-pin__halo {
  position: absolute; left: 50%; bottom: -6px;
  width: 46px; height: 46px; margin-left: -23px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224,197,141,.5) 0%, rgba(224,197,141,0) 70%);
  z-index: 1;
}

/* Controles do MapLibre no visual do tema. */
.map__canvas .leaflet-control-zoom {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(31, 39, 76, .14);
}
.map__canvas .leaflet-control-zoom a {
  color: var(--navy); border: 0; font-weight: 400;
  width: 32px; height: 32px; line-height: 32px;
}
.map__canvas .leaflet-control-zoom a:hover { background: var(--cream); }
.map__canvas .leaflet-control-zoom a + a { border-top: 1px solid var(--line); }
.map__canvas .leaflet-control-attribution {
  background: rgba(255, 255, 255, .84);
  font-size: .66rem;
  padding: 2px 6px;
}
.map__canvas .leaflet-popup-content-wrapper {
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 22px rgba(31, 39, 76, .18);
}
.map__canvas .leaflet-popup-content {
  font-family: var(--font-body);
  font-size: .85rem; line-height: 1.45;
  margin: .75rem .95rem;
}
.map__canvas .leaflet-popup-content strong { color: var(--navy); }

.map__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .9rem 1.15rem;
  border-top: 1px solid var(--line);
  font-size: .87rem;
  color: var(--ink-muted);
}
.map__address { display: inline-flex; align-items: center; gap: .45rem; color: var(--navy); }
.map__foot svg { width: 15px; height: 15px; flex: none; }
.map__links { display: flex; gap: 1.25rem; }
.map__links a { color: var(--navy-mid); font-weight: 500; }
.map__links a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 560px) {
  .map__canvas { height: 300px; }
  .map__foot { font-size: .82rem; }
  .map__links { gap: 1rem; }
}

/* ------------------------------------------------------------------- sobre */

.about { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem);
         align-items: center; }
.about__name { font-family: var(--font-display); font-weight: 300;
               font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: .98;
               letter-spacing: .03em; text-transform: uppercase; color: var(--navy); }
.about__role { font-size: .84rem; color: var(--ink-muted); }
.about__lead { font-size: 1.22rem; line-height: 1.5; margin-top: 1.5rem;
               color: var(--navy-mid); max-width: 30ch; }
.about__list { list-style: none; padding: 0; margin: 1.5rem 0 0;
               color: var(--ink-muted); font-size: 1rem; }
.about__list li::before { content: "• "; color: var(--navy-mid); }
.about__photo { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3.2;
                background: var(--nude-soft); box-shadow: var(--shadow); }
.about__photo img { width: 100%; height: 100%; object-fit: cover; }

/* O "sobre" que fica dentro do painel da home tem três blocos, não dois: em
   duas colunas a foto caía ao lado do nome e sobrava metade da linha vazia.
   Fora do computador ele empilha: nome, texto, foto. A geometria do
   material entra só a partir de 1024px. */
/* Fora do computador o bloco empilha logo depois do último cartão, e o
   botão "Saiba mais" encostava em "CALINA BASSI". */
.panel .about { display: block; margin-top: clamp(3rem, 9vw, 6rem); }
.panel .about__text { margin-top: 1.75rem; }
.panel .about__photo { margin-top: 2rem; max-width: 420px; }

/* --------------------------------------------------------------------- CTA */

.cta { position: relative; overflow: hidden; }
.cta__watermark {
  position: absolute; right: -6%; top: 50%; transform: translateY(-50%);
  width: min(46%, 520px); opacity: .16; pointer-events: none;
}
.cta__inner { position: relative; z-index: 2; max-width: 34rem; }
.cta__bar { width: 82px; height: 10px; background: var(--cream); margin-bottom: 2.5rem; }
.cta__title { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.06; }
.cta__title strong { font-family: var(--font-body); font-weight: 700;
                     font-size: .58em; letter-spacing: .01em; display: inline; }
.cta__sub { font-family: var(--font-body); font-weight: 400; font-size: .58em;
            letter-spacing: .01em; text-transform: uppercase; }
.cta__tail { display: block; font-size: .58em; line-height: 1.25; margin-top: .6em; }
.cta__tail .cta__sub, .cta__tail strong { font-size: 1em; }
.cta__arrow { width: 1px; height: 88px; background: var(--cream);
              margin: 2.5rem 0 0 1rem; position: relative; }
/* A ponta é um "V" aberto, não um quadrado girado a 45º: no material os
   braços medem 21,4 na horizontal por 17,1 na vertical. Dois riscos
   girados a partir da ponta reproduzem esse ângulo. */
.cta__arrow::before,
.cta__arrow::after {
  content: ""; position: absolute; bottom: 0; left: 50%;
  width: 1px; height: 14px; background: var(--cream);
  transform-origin: bottom center;
}
.cta__arrow::before { transform: translateX(-50%) rotate(-51.4deg); }
.cta__arrow::after  { transform: translateX(-50%) rotate(51.4deg); }
.cta__actions { display: flex; align-items: center; gap: 2.5rem;
                flex-wrap: wrap; margin-top: 2.5rem; }
.cta__logo { width: 210px; }

/* ------------------------------------------------------------------ rodapé */

.footer { background: var(--gold); color: var(--navy); padding-block: 1.5rem; }
.footer__inner { display: flex; align-items: center; justify-content: center;
                 gap: clamp(1.25rem, 4vw, 3.5rem); flex-wrap: wrap; }
.footer__mark { width: 46px; }
.footer__link { display: inline-flex; align-items: center; gap: .6rem;
                font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; }
.footer__link svg { width: 17px; height: 17px; }
.footer__sep { width: 1px; height: 26px; background: rgba(31,39,76,.32); }
.footer__legal { background: var(--navy); color: rgba(244,239,233,.62);
                 font-size: .72rem; padding-block: .9rem; text-align: center; }
.footer__legal a:hover { color: var(--cream); text-decoration: underline; }

/* --------------------------------------------------------- botão do WhatsApp */

.wa-float {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 60;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 8px 26px rgba(0,0,0,.24);
  transition: transform .2s ease;
}
.wa-float:hover { transform: scale(1.06); }
.wa-float svg { width: 31px; height: 31px; }

/* ----------------------------------------------------------------- formulário */

.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form label { display: block; font-size: .74rem; letter-spacing: .1em;
              text-transform: uppercase; color: var(--ink-muted);
              margin-bottom: .4rem; }
.form input, .form textarea, .form select {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .85rem 1rem; font: inherit; font-size: .95rem;
  background: var(--white); color: var(--navy);
}
.form textarea { min-height: 150px; resize: vertical; }
.form input:focus, .form textarea:focus { border-color: var(--navy-mid); outline: none; }
.form .error { color: #9A3B3B; font-size: .78rem; margin-top: .3rem; }
.form input[aria-invalid="true"], .form textarea[aria-invalid="true"] {
  border-color: #9A3B3B;
}
/* Campo isca anti-robô: escondido de gente, presente no DOM. */
.form .hp { position: absolute; left: -9999px; opacity: 0; height: 0; }

.alert { padding: 1rem 1.25rem; border-radius: var(--radius-sm);
         font-size: .92rem; margin-bottom: 1.5rem; }
.alert--ok { background: #E4EFE7; color: #2E5B43; }
.alert--err { background: #F6E4E4; color: #7E3535; }

.contact-grid { display: grid; grid-template-columns: 1fr 380px; gap: 3.5rem;
                align-items: start; }
.contact-info dt { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
                   color: var(--ink-muted); margin-top: 1.5rem; }
.contact-info dd { margin: .25rem 0 0; font-size: 1.05rem; }

/* -------------------------------------------------------------- responsivo */

/* FILTROS_SANFONA: 1080px é onde a barra de filtros deixa de ser coluna
   lateral e passa a empilhar sobre a lista. O mesmo número está em site.js,
   que é quem fecha a sanfona. As duas discordando, o resumo fica inclicável
   no celular ou o painel some no computador. */
@media (max-width: 1080px) {
  .searchbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .searchbar .field--search { grid-column: 1 / -1; }
  /* minmax(0, 1fr) e não 1fr: um `1fr` tem piso igual ao min-content do
     conteúdo, então um filho que não encolhe estoura a largura da tela. Era a
     causa da rolagem horizontal em /contato -- 404px numa tela de 392px. */
  .layout-search { grid-template-columns: minmax(0, 1fr); }
  /* Aqui o painel vira sanfona de verdade: fechado por padrão, o visitante
     encontra a lista de imóveis logo abaixo do título em vez de sete campos
     de formulário. O `open` no HTML é neutralizado pelo seletor de conteúdo,
     porque o atributo não pode depender da largura da tela. */
  .filters { position: static; padding-block: 1rem; }
  .filters > summary {
    pointer-events: auto; cursor: pointer; margin-bottom: 0;
    padding: .35rem 0; min-height: 44px;
  }
  .filters > summary svg { display: block; }
  .filters[open] > summary { margin-bottom: 1.25rem; }
  .detail-body { grid-template-columns: minmax(0, 1fr); }
  .aside-card { position: static; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 820px) {
  .nav { display: none; }
  .nav-toggle { display: block; }
  .site-header__inner { gap: 1rem; }

  /* Menu aberto: lista vertical sobre o topo. */
  .site-header.is-open .nav {
    display: flex; flex-direction: column; align-items: flex-start;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--navy); color: var(--cream);
    padding: 1.5rem var(--gutter); gap: 1.1rem;
  }
  .site-header.is-open .nav__link { color: var(--cream); }

  .about { grid-template-columns: 1fr; }
  .about__photo { order: -1; }
  .gallery { grid-template-columns: minmax(0, 1fr); }
  .gallery__side { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  /* Em coluna única a capa não define mais a altura da lateral, então cada
     miniatura volta a precisar da própria proporção. */
  .gallery__thumb { aspect-ratio: 4 / 3; }
  .lightbox__nav { width: 44px; height: 44px; }
  .lightbox__thumbs { justify-content: flex-start; }
  .form__row { grid-template-columns: minmax(0, 1fr); }
  .panel--overlap { margin-top: -3rem; }
  .cta__watermark { opacity: .09; right: -22%; }
}

@media (max-width: 560px) {
  .searchbar { grid-template-columns: minmax(0, 1fr); }
  .brand__lockup { width: 178px; }
  .grid-properties { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* Celular estreito: dois cartões por linha deixariam a foto com ~180px de
   largura. Um por linha dá a mesma leitura dos portais no telefone. */
@media (max-width: 440px) {
  .grid-properties { grid-template-columns: minmax(0, 1fr); }
}

/* ----------------------------------------------------------------- toque -- */

/* Vale por tipo de ponteiro, não por largura: um tablet grande com tela
   sensível precisa do mesmo alvo generoso que um celular, e um monitor
   estreito com mouse não precisa. 44px é a diretriz do WCAG 2.5.5 e do
   guia da Apple -- abaixo disso o dedo erra.

   Fora daqui ficam os links dentro de parágrafo (telefone e e-mail no meio
   do texto): esticar a altura deles quebraria o espaçamento das linhas, e o
   próprio WCAG abre exceção para link em linha de texto. */
@media (pointer: coarse) {
  .btn { min-height: 48px; }

  /* Alvo de toque nas listas de escolha. */
  .escolha > summary { min-height: 48px; }
  .escolha .escolha__item { min-height: 44px; }

  .nav__link, .footer__link {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  /* O sublinhado animado do menu é ancorado no rodapé do link; com a altura
     maior ele desceria junto e descolaria do texto. */
  .nav__link::after { bottom: .55rem; }

  .nav-toggle { padding: .85rem; margin-right: -.85rem; }

  .breadcrumb a { display: inline-block; padding-block: .5rem; }

  .filters select, .filters input, .sort-select { min-height: 44px; }
  .field { min-height: 68px; }

  /* Controles do Leaflet vêm com 30px do próprio pacote. */
  .map .leaflet-control-zoom a {
    width: 44px; height: 44px; line-height: 44px; font-size: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header, .wa-float, .footer, .cta, .filters { display: none !important; }
  body { background: #fff; }
}


/* ------------------------------------------------------- cartão da vitrine */

/* Sem preço nem ficha (ver "property-teaser"), o cartão fica curto e o botão
   sobe: alinhar pelo fim faz os "Saiba mais" das cinco vitrines caírem na
   mesma linha, mesmo com títulos de uma ou duas linhas. */
.card--teaser { display: flex; flex-direction: column; }
/* Abaixo do desktop não há medida do material: o `auto` alinha os botões
   pela base, que é o que evita a fileira escadinha. No desktop as margens
   medidas assumem, e o piso de duas linhas do título faz o alinhamento. */
@media (max-width: 1023px) {
  .card--teaser .card__cta { margin-top: auto; }
}

/* Ícone dentro do campo de seleção, como no material do cliente.
   Filho direto do .field ou do <summary>, conforme o campo seja um
   <select> ou a lista de escolha própria. */
.field--icon { position: relative; padding-left: 2.6rem; }
.field--icon > svg,
.field--icon > summary > svg {
  position: absolute; left: .95rem; top: 50%; transform: translateY(-50%);
  width: 19px; height: 19px; color: var(--navy); pointer-events: none;
}

/* "Mais filtros" leva o ícone depois do texto. */
.btn--icon-end > svg { order: 1; }


/* --------------------------------------------------------- página de erro */

.errorpage { text-align: center; padding-block: clamp(1rem, 4vw, 3rem); }
.errorpage .section-title { margin-top: .5rem; }
.errorpage__lead {
  margin: 1rem auto 0; max-width: 46ch;
  font-size: 1.06rem; line-height: 1.6; color: var(--navy-mid);
}
.errorpage__actions {
  margin-top: 2.25rem; display: flex; gap: .75rem;
  justify-content: center; flex-wrap: wrap;
}


/* ======================================================================
   GEOMETRIA DO MATERIAL

   Tudo abaixo foi medido no `cliente/Site.pdf` (a peça aprovada) e não
   estimado a olho. A página tem 1920pt de largura, então cada medida virou
   `vw` dividindo por 1920: o desenho inteiro escala junto e, a 1920px, cai
   pixel a pixel onde o material coloca.

   Só vale do desktop para cima. O material não tem versão de celular, e
   `vw` puro ali daria corpo de 21px na chamada. Abaixo de 1024px seguem as
   regras responsivas de sempre, que são invenção nossa por necessidade.

   COMO MEDIR, e a armadilha que custou duas rodadas.

   As CAIXAS (painel, cartões, botões, réguas, fotos) vêm de
   `get_drawings()` e `get_image_info()`: é geometria de verdade, comparável
   direto com `getBoundingClientRect`.

   Os TEXTOS não. O `bbox` que o PyMuPDF devolve para um trecho de texto é a
   caixa da FONTE (do ascendente ao descendente), não a da tinta.
   Comparar esse topo com o topo de tinta medido no navegador põe cada linha
   cerca de 0,3em acima do lugar: o texto sai do centro vertical dos botões
   e os campos da busca desalinham entre si. Foi o que aconteceu, e só
   aparece olhando, porque a conferência numérica fecha em zero.

   Por isso todo alvo vertical de texto aqui é LINHA DE BASE, tirada do
   `origin` de cada caractere em `get_text("rawdict")`, e conferida no
   navegador por topo-da-caixa + meia-entrelinha + ascendente da fonte.

       medida (pt @1920)                    vw
       hero, altura              868,4   45,2292
       chamada, topo da linha 1  225,9   11,7656
       chamada, corpo             43,6    2,2708
       chamada, entrelinha        52,3    (1,20 do corpo)
       busca, topo               417,6   21,7500
       busca, largura           1465,2   76,3125
       busca, altura             105,2    5,4792
       campo, altura              78,9    4,1094
       "Mais filtros", altura     50,9    2,6510
       botão, largura            249,6   13,0000
       marca, x / y               71,5 / 61,7
       painel, largura          1796,0   93,5417
       painel, recuo interno      57,0    2,9688
       vitrine, vão entre cartões 42,3    2,2031
   ====================================================================== */

@media (min-width: 1024px) {
  :root {
    /* O painel branco tem 1796pt numa página de 1920, com 62pt de margem. */
    --wrap: 93.5417vw;
    --gutter: 3.2292vw;
  }

  /* Ancorado na margem do material, não centralizado no espaço útil.
     A janela tem 1920 mas a barra de rolagem come 15, então centralizar
     punha o centro em 952,5 e tudo que é centralizado (a chamada, a busca,
     os cartões) caía 7,5px à esquerda do material. Fixando a margem
     esquerda em 62 e a largura em 1796, o centro volta a 960 e a borda
     direita para em 1858, dentro dos 1905 úteis: sem transbordo. */
  .wrap:not(.wrap--read) {
    width: var(--wrap);
    margin-left: var(--gutter);
    margin-right: 0;
  }

  .hero {
    /* A proporção do hero é largura:altura de 2,21. Amarrada a `vh`, como
       estava, a foto mudava de enquadramento conforme a altura da janela e
       a chamada saía da serra, que é exatamente o que não podia acontecer. */
    min-height: 45.2292vw;
    justify-content: flex-start;
    /* 215,2 e não os 225,9 do material: aquele número é onde a TINTA começa,
       e a caixa do elemento fica 10,7 acima dela (meia-entrelinha mais a
       folga entre o ascendente da fonte e o topo real do glifo). Medido no
       navegador com `measureText`, não estimado. */
    padding-block: 11.7994vw 0;
  }

  .hero__title {
    font-size: 2.2708vw;
    line-height: 1.2;
  }

  .searchbar {
    /* Larguras de cada controle, na ordem do material:
       Pretensão · Tipo · Busca · Mais filtros · Encontrar.
       Os vãos entre eles não são iguais na peça (20,4 · 14,2 · 20,9 ·
       20,9), então entram como colunas próprias e cada controle recebe a
       sua: um `gap` único erra três dos quatro. */
    width: 76.3125vw;
    max-width: none;
    /* Devolve os 10,7 que a chamada subiu: a caixa da busca é retângulo
       desenhado, então aqui o alvo do material (417,6) é caixa, não tinta. */
    margin-top: 4.5026vw;
    /* 105,2 de caixa menos 78,9 de campo dá 13,15 de recuo em cima e
       embaixo, não os 14 que as bordas do desenho sugerem. */
    padding: 0.6849vw 0.75vw 0.6849vw 0.8125vw;
    gap: 0;
    grid-template-columns:
      13.6979vw 1.0625vw 13.6979vw 0.7396vw 21.7448vw 1.0885vw 8.625vw 1.0885vw 13vw;
  }
  .searchbar > *:nth-child(1) { grid-column: 1; }
  .searchbar > *:nth-child(2) { grid-column: 3; }
  .searchbar > *:nth-child(3) { grid-column: 5; }
  .searchbar > *:nth-child(4) { grid-column: 7; }
  .searchbar > *:nth-child(5) { grid-column: 9; }
  /* Campo sem rótulo: o valor ocupa a caixa inteira, centrado. */
  .field--placeholder { justify-content: center; }
  /* Miolo dos campos, medido na peça:
       "Pretensão"  15pt  #958686  tinta y 444,3  x 267,8
       "Compra"     24pt  #18264F  tinta y 462,2  x 267,8
       "Tipo Imóvel" 24pt          tinta y 455,3  x 570,3
       marcador     18,6pt #958686 tinta y 458,6  x 862,4  */
  /* Tudo aqui escala junto. O `min-height: 62px` do estilo base é um piso
     fixo: abaixo de 1500px ele passava a mandar na altura enquanto as
     margens em vw encolhiam, e o miolo saía do centro. Zerado, a caixa é
     sempre 4,1094vw e o empilhamento fica centrado em qualquer largura. */
  .searchbar .field {
    height: 4.1094vw; min-height: 0; padding: 0 1.2917vw;
    justify-content: center; gap: .3125vw;
  }
  /* Mesmo acerto dos botões: centrar a caixa da linha deixa a maiúscula
     acima do centro óptico, porque a fonte reserva espaço para acento e
     descida. Aqui a medida vai em vw porque o corpo do texto também está
     em vw, então as duas encolhem juntas. */
  /* O espaco entre "Pretensão" e "Compra" nasce em `.escolha > summary`,
     que vale .5rem. No material as duas linhas tem 27,3 de uma base a
     outra, e com 8px o par abria 30 e desencaixava das duas pontas. */
  /* O <details> tem um segundo filho de altura zero (a caixa do conteúdo
     fechado), e o `gap` do campo reservava 6px para ele: o rosto ficava 6
     mais curto que a caixa e o texto subia 3. O espaço entre as duas linhas
     é do summary, não do campo. */
  /* A seta da peça é um "v" de traço 2 com braços de 8,88 na horizontal,
     parando 24,2 antes da borda direita do campo. A regra geral desenha um
     quadrado de 8px girado, medida fixa que a 1920 sai com metade do
     tamanho e 13 fora do lugar. */
  .searchbar .field--select::after {
    width: .6854vw; height: .6854vw; right: 1.3021vw;
    border-right-width: .1042vw; border-bottom-width: .1042vw;
    transform: translateY(calc(-50% - .2568vw)) rotate(45deg);
  }
  .searchbar .field.field--escolha { gap: 0; }
  .searchbar .field.field--escolha > summary { padding-top: 0; gap: .2764vw; }
  /* Os dois campos não ficam no mesmo lugar dentro da caixa na peça: o de
     duas linhas sobe 1,75 e o de uma linha desce o mesmo tanto. Medido
     sobrepondo o desenho ao navegador, não estimado. */
  .searchbar .field--select:not(.field--placeholder) > summary { padding-bottom: .1823vw; }
  .searchbar .field.field--placeholder > summary { padding-top: .1823vw; }

  .searchbar .field--search input { position: relative; top: -.05em; }
  .searchbar .field__label {
    font-size: .7812vw; color: #958686; letter-spacing: 0; line-height: 1;
    margin-top: 0;
  }
  .searchbar .field select,
  .searchbar .field .field__valor,
  .searchbar .field input { font-size: 1.25vw; color: #18264F; line-height: 1; }
  /* A peça aplica 100/1000 de abertura só no valor escolhido: entre cada
     letra de "Tipo Imóvel" e de "Compra" há 2,401 a 24pt, e nenhuma no
     rótulo nem no texto de repouso da busca. Sem isso a palavra fica 17%
     mais curta que o desenho. */
  .searchbar .field .field__valor { letter-spacing: .1em; }
  .searchbar .field--select select,
  .searchbar .field--select .field__valor { margin-top: 0; }
  .searchbar .field--placeholder { padding-left: 2.2344vw; }
  .searchbar .field--placeholder select,
  .searchbar .field--placeholder .field__valor { margin-top: 0; }
  /* A seta ocupa .78vw do valor (medido de 1080 a 1920) e "Tipo Imóvel" em
     repouso sobra 15px a 1080 e 28 a 1920: 1vw fica antes da seta sem
     cortar o texto de repouso. Uma medida fixa, como o .85rem geral, tomava
     esses 15px quase inteiros a 1080. */
  .searchbar .escolha.field--escolha[data-multi] > summary > .field__valor { margin-right: 1vw; }
  .searchbar .field--icon > svg,
  .searchbar .field--icon > summary > svg { width: 1.0859vw; height: .9401vw; left: .926vw; }
  /* Sem recuo à direita: o texto de repouso ocupa quase toda a caixa
     (328,5 de 358,7 no material) e, com os 24,8 do recuo comum, a última
     palavra era cortada no meio. O começo do texto não muda. */
  .searchbar .field--search { padding-left: 1.3021vw; padding-right: 0; gap: .7292vw; }
  .searchbar .field--search svg { width: 1.0297vw; height: 1.0969vw; }
  .searchbar .field--search input { font-size: .9688vw; }
  .searchbar .field--search input::placeholder { color: #958686; }
  /* "Mais Filtros" na peça: 18,6pt sem abertura extra, texto de 1258,3 a
     1363,1, ícone de 1368,7 a 1386,6, dentro de uma caixa 1242,0-1407,6. */
  .searchbar .btn--ghost {
    text-transform: none; letter-spacing: 0; font-size: .9688vw;
    font-weight: 400; line-height: 1;
    padding: 0 1.0938vw 0 .849vw; gap: .2917vw;
  }
  /* Na peça o traço do ícone não fica no meio do botão: sobe 1,3 em
     relação ao centro, e a linha de baixo do ícone acompanha a base
     do texto. */
  .searchbar .btn--ghost > svg { width: 1.0396vw; height: .6734vw;
                                position: relative; top: -.1172vw; }
  /* "Mais filtros" é mais baixo que os campos no material: é um comando,
     não um campo de preenchimento. */
  .searchbar .btn--ghost { height: 2.651vw; align-self: center; margin-top: .125vw; }
  /* "ENCONTRAR IMÓVEL": 18,6pt, de 1442,2 a 1664,5 dentro da caixa
     1428,5-1678,2, centrado, com a abertura larga da peça. */
  .searchbar .btn--gold {
    height: 4.1094vw; font-size: .9688vw; font-weight: 400;
    letter-spacing: .0753em; line-height: 1;
    padding: 0;
  }

  /* O cabeçalho já trazia `padding: 24px 0`, que somava ao recuo do material
     e jogava a marca 24px abaixo do lugar. Zerado aqui, o recuo do material
     passa a ser o único. */
  .site-header { padding: 0; }
  /* A marca começa em 71,5pt e o painel em 62: 9,5pt a mais de recuo. */
  .site-header__inner { padding: 3.2135vw 0.3125vw 0 0.4948vw; }
  /* A geometria da peça vale para o cabeçalho sobre a foto, que não tem
     linha embaixo. Nas páginas de fundo claro o recuo só em cima
     encostava a assinatura na borda inferior. */
  .site-header--solid .site-header__inner { padding-block: 1.8229vw; }
  /* Largura pelo material. A altura fica em `auto` de propósito: a proporção
     do nosso SVG difere um pouco da caixa do desenho, e travar as duas
     esmagaria o monograma para ganhar 3px. */
  /* Assinatura 316 x 70,8 com o topo em 61,7 e a esquerda em 71,5. */
  .brand__lockup { width: 16.4583vw; height: auto; display: block; }

  /* Três links, telefone e o botão de menu, nas posições da peça. */
  .nav { gap: 0; position: relative; justify-content: flex-end; flex: 1; }
  .nav__link { font-size: .7812vw; letter-spacing: .4em; }
  /* Telefone, links e menu não estão alinhados entre si na peça. */
  .nav__link { position: relative; top: .1302vw; }
  .nav__phone { position: relative; top: .3177vw; }
  .nav__phone svg { width: 1.2031vw; height: 1.25vw; }
  /* 42 entre os links, não os 53,3 da peça: com "Contato" a mais na
     linha, o grupo inteiro se desloca para a direita e o ícone do
     telefone sai de cima do morro da foto, que ocupa de 1050 a 1230
     nesta altura. Continua folgado: 42 entre maiúsculas de 15pt. */
  .nav__link + .nav__link { margin-left: 1.9792vw; }
  .nav__phone + .nav__link { margin-left: 2.724vw; }

  /* A peça mostra três links e um botão de menu; aqui os quatro ficam à
     vista e o botão some: no computador ele só escondia "Contato". No
     celular a gaveta continua sendo a única saída, então ele volta lá. */
  .nav-toggle { display: none; }

  /* No material o painel NÃO sobrepõe o hero: a foto acaba em 868,4 e o
     painel começa em 913, com 44,6 de faixa navy entre os dois. A margem
     negativa que o puxava para cima era invenção nossa. */
  .section--hosts-panel { padding-top: 2.3229vw; }
  .panel--overlap { margin-top: 0; }
  /* Recuo de cima maior que os demais: o título de seção precisa da tinta em
     1010,2, e a caixa dele fica 26,9 acima disso. */
  .panel { padding: 3.6615vw 2.9688vw 2.9688vw; }

  /* Vitrine: passo de 342,7 entre cartões e caixa de 310,4 dão vão de 32,3,
     e não os 42 que a distância entre as fotos sugeria, porque as imagens
     têm proporções diferentes e não preenchem a caixa toda. */
  .grid-properties { gap: 1.6823vw; }

  .section-title { font-size: 2.8646vw; }

  /* Ritmo vertical do cartão, medido tinta a tinta no material:
     foto 1117,4-1398,1 · título 1414,8 · bairro 1503,7 · botão 1553,3.
     O `gap` único do flex não dá conta de espaços diferentes entre os três,
     então cada um recebe a própria margem. */
  .card { gap: 0; }
  .card__media { aspect-ratio: 310.4 / 280.7; }
  /* 43,4 entre a tinta do título de seção e o topo da foto. */
  .section-head { margin-bottom: 2.2604vw; }
  /* Deslocamento só do texto: a caixa do cabeçalho de seção é que
     posiciona a foto do primeiro cartão, e ela não pode se mexer. */
  .section-head .section-title { position: relative; top: .2292vw; }
  .rule + .section-head .section-title { top: -.2865vw; }
  /* A vitrine de locação mede 10px a mais que a de venda entre título e
     foto, diferença do próprio material, não do nosso desenho. */
  .rule + .section-head { margin-bottom: 1.7396vw; }

  /* Só na vitrine da home, onde a coluna tem a largura da peça:
     - a peça abre as letras do título ("Sobrado" ocupa 161,9 contra os
       142,7 do Montserrat justo);
     - "Apartamento 3 quartos" caberia em "Apartamento 3" + "quartos", mas a
       peça quebra depois de "Apartamento": não é largura, é equilíbrio
       entre as duas linhas, que é o que `balance` faz.
     No catálogo a coluna é mais estreita e essa abertura só cortaria
     título com reticências. */
  .panel .card__title { letter-spacing: .0769em; text-wrap: balance; }

  .card__title {
    font-size: 1.7604vw; line-height: .967;
    margin-top: 1.5104vw;
    /* Exatamente duas linhas: piso para o título curto não subir o resto do
       cartão, teto para o longo não empurrar. No material todos os títulos
       têm duas linhas; os nossos vêm do cadastro e variam de uma a três, e
       era a terceira linha de "Casa moderna em Três Rios do Sul (última
       unidade)" que jogava o botão 112px abaixo do lugar. */
    min-height: 3.4046vw;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .card__where  {
    font-size: .9844vw; color: var(--mauve);
    /* O <p> traz margem de baixo do agente do usuário, que empurrava o botão
       19px abaixo do lugar. */
    margin: .25vw 0 0;
  }
  .card__cta { margin-top: 1.2865vw; }
  .card__where svg { width: .9844vw; height: .9844vw; }

  /* "Saiba mais": 147,9 x 30,6 no material, texto branco sobre o tom quente.
     Estava em nude claro com texto navy, outro par de cores. */
  .card__cta.btn--nude {
    width: 7.7031vw; height: 1.5938vw; line-height: 1; padding: 0;
    font-size: .7448vw; letter-spacing: .16em;
    background: var(--mauve); color: var(--white);
  }
  .card__cta.btn--nude:hover { background: #877879; }

  /* "VER TUDO": contorno de 190,4 x 39,4, risco de 1,29 no tom quente, com
     o texto de 18,4pt e a mesma abertura entre letras do rodapé. A peça não
     repete a medida nas duas vitrines (a de locação fica 10 mais alta e 4,8
     mais à direita), daí a regra seguinte. */
  .section-head .btn--ghost {
    width: 9.9167vw; height: 2.0521vw; line-height: 1;
    /* Recuo em em, medido no navegador em 1280, 1440, 1600 e 1920.
       Com `align-items: center` quem fica centrada e a caixa da linha,
       nao a tinta: a folga entre o topo da caixa e a maiuscula e maior
       que a de baixo, porque a fonte reserva espaco para acentos e
       descidas. A diferenca e proporcional ao corpo da letra, entao a
       correcao so se mantem em qualquer largura se for em em. */
    padding: 0 0 0 .1563vw;
    /* Risco em vw como o resto: em px ele engordava proporcionalmente nas
       telas menores e tirava a tinta do centro da moldura. */
    border: .0671vw solid var(--mauve); background: none;
    font-size: .9583vw; color: var(--mauve); letter-spacing: .2891em;
    align-self: flex-start; margin: 2.4427vw .5417vw 0 0;
  }
  .rule + .section-head .btn--ghost { margin: 1.9219vw .2917vw 0 0; }
  /* Uma regra só: a segunda, herdada de quando isto era texto solto,
     anulava o preenchimento e deixava o texto quente sobre o painel claro
     com um sublinhado no meio da abertura das letras. */
  .section-head .btn--ghost:hover {
    background: var(--mauve); border-color: var(--mauve); color: var(--white);
  }
}

/* ------------------------------------------------- CTA, medido no material

   Medidas em pt numa página de 1920 (÷19.2 = vw):

     seção                3421,4 → 4354,2   (altura 932,8)
     traço branco         y 3458,7  x 126,9   118,5 x 25,9
     "VAMOS"              y 3567,0  x 126,9   98,5pt
     "ENCONTRAR"          y 3674,0            (entrelinha 107,0 = 1,086)
     "O IMÓVEL CERTO"     y 3790,0  x 130,3   40,7pt  Montserrat Bold
     "PARA VOCÊ?"         y 3840,2            40,7pt  Montserrat Regular
     ponta da seta        y 4085,8 → 4102,9
     botão                y 4149,2  x 126,9   426,4 x 78,9   #DABE8A
     texto do botão                           18,6pt  #18264F
     marca ao LADO do botão  x 640,3  altura 82,5
     marca d'água         y 3599,2  x 1320,4  499,1 x 610,3
   -------------------------------------------------------------------- */

@media (min-width: 1024px) {
  /* A faixa vai de 3361 a 4340: 979 de altura, e a barrinha branca começa
     97,7 abaixo do topo. */
  .cta { padding-block: 5.0885vw 0; min-height: 50.9896vw; }

  /* O conteúdo começa em 126,9 e o contêiner em 62: 64,9 de recuo. */
  .cta__inner {
    max-width: none;
    padding-left: 3.3802vw;
  }

  .cta__bar { width: 6.1719vw; height: 1.349vw; margin-bottom: 4.974vw; }

  .cta__title { font-size: 5.1302vw; line-height: 1.0863; }
  /* As duas últimas linhas são Montserrat, não a serifada: 40,7 sobre 98,5
     dá .4132 do corpo do título, e o avanço entre elas é 48,8. */
  .cta__tail { font-size: .4132em; line-height: 1.1749; margin-top: .0995em; }

  /* Seta: risco de 2px em x 257,0, de 3923,1 a 4102,9, com a ponta em V
     de 42,8 x 17,1. */
  .cta__arrow { width: .1042vw; height: 9.3646vw; margin: 1.4297vw 0 0 6.776vw; }
  .cta__arrow::before, .cta__arrow::after { width: .0919vw; height: 1.4271vw; }

  /* Lado a lado. Empilhados, como estavam, o bloco descia 100px e o rodapé
     ia junto, e era o que mais destoava nesta seção. O `max-width: 34rem`
     do contêiner é que forçava a quebra. */
  /* Botão e assinatura não estão centrados entre si no material: a
     assinatura desce 6,5. Por isso o alinhamento pelo topo. */
  .cta__actions {
    gap: 4.5313vw;
    margin-top: 2.4115vw;
    flex-wrap: nowrap;
    align-items: flex-start;
  }
  .cta__actions .btn--gold {
    width: 22.2083vw; height: 4.1094vw;
    font-size: .9688vw; line-height: 1; padding: 0;
  }
  .cta__logo { width: 19.2031vw; margin-top: .2786vw; }

  /* O monograma não é um enfeite translúcido: no material é uma mancha
     sólida um tom abaixo do fundo, e o círculo do "C" sai pela direita e
     por baixo. O SVG já vem recortado assim; aqui só encaixamos a caixa. */
  .cta__watermark {
    right: auto; transform: none; opacity: 1;
    left: 55vw; top: 3.1458vw;
    width: 45vw; height: 48.5833vw;
  }
}

/* ------------------------------------- painel e "sobre", medidos no material

     painel          913 → 3361   x 62 → 1858   (1796 x 2448)
                     gradiente vertical #FFFFFF → #D9CBC2
     régua           y 1735,9  x 129,0 → 1790,6  #958688
     "DESTAQUE LOCAÇÃO" tinta y 1878,4
     "CALINA"        tinta y 2694,0  x 119,9  98,5pt  #395681
     "BASSI"         tinta y 2788,1           (avanço 94,1)
     cargo           y 2721,5  x 648,6 → 871,8  21,6pt  alinhado à direita
     CRECI           y 2941,3  x 126,9  36,7pt
     texto           y 3029,3 e 3073,3  36,7pt  (avanço 44,0)
     marcadores      y 3145,3 / 3181,2 / 3217,0  29,9pt (avanço 35,9)
     foto            y 2603,8  x 966,3 → 1809,0
   -------------------------------------------------------------------- */

@media (min-width: 1024px) {
  /* Um cartão só, do branco ao nude. Antes eram três blocos (painel branco,
     faixa nude e seção do "sobre") e as emendas entre eles não existem no
     material. */
  .panel {
    background: linear-gradient(180deg, #FFFFFF 0%, #D9CBC2 100%);
    /* A foto do "sobre" passa do pé do painel no material e é cortada ali. */
    overflow: hidden;
    padding-bottom: 5.4323vw;
  }
  .section--hosts-panel { padding-bottom: 0; }

  .rule {
    border-top-color: var(--mauve);
    margin-block: 7.9167vw 6.4948vw;
    margin-inline: .3229vw 0;
  }

  /* Só dentro do painel da home: em /sobre o bloco é a grade de duas
     colunas do estilo base, que cabe na coluna de leitura.

     Coluna de texto em fluxo; a foto sai do fluxo.
     Na grade ela esticava as linhas (tem 898,7 de altura contra ~570 de
     texto) e empurrava CRECI, parágrafo e marcadores 230px para baixo.
     Fora do fluxo, cada um cai na coordenada do material e a foto vaza pelo
     pé do painel, que a corta: é o que o desenho mostra. */
  .panel .about { display: block; position: relative; margin-top: 13.9844vw; }

  .panel .about__head { width: 44.1302vw; }
  .panel .about__name {
    font-size: 5.1302vw; line-height: .9553;
    color: var(--navy-mid); letter-spacing: 0;
  }
  /* Abaixo do nome, alinhado com ele: na peça o cargo ficava à direita,
     na mesma linha de "CALINA". */
  .panel .about__role {
    font-family: var(--font-body); font-size: 1.125vw; line-height: 1.35;
    color: #000; margin-top: 1.5625vw;
  }

  /* O cargo ocupa a faixa onde a peça punha o CRECI; com esta folga o
     parágrafo e os marcadores caem nas mesmas linhas do material
     (3029,3 e 3145,3) e o pé do painel não fica vazio. */
  /* O parágrafo e os marcadores seguem nas linhas da peça (3067,5 e
     3176,5) mesmo com o nome numa linha só: a folga que sobrou foi para
     cima, entre a cidade e o texto, que é o mesmo respiro que o material
     abre entre o nome e o parágrafo. */
  .panel .about__text { width: 44.1302vw; margin-top: 6.7292vw; }
  .panel .about__lead  { font-size: 1.9115vw; line-height: 1.199; color: #000;
                  margin: 1.9115vw 0 0; max-width: none; }
  .panel .about__list  { font-size: 1.5573vw; line-height: 1.2007; color: #000;
                  margin: 1.4583vw 0 0; }

  /* y 2603,8 e x 966,3 na página; o painel começa em 913 e em x 62. */
  .panel .about__photo {
    position: absolute;
    left: 44.1302vw;
    top: -3.7239vw;
    width: 43.8906vw; max-width: none;
    /* Cartão de 842,7 x 671,2 com canto de 30, e não a foto sangrando até o
       pé do painel: na peça a moldura fecha antes, com nude em volta. */
    height: 34.9583vw; aspect-ratio: auto;
    border-radius: 1.5625vw; overflow: hidden;
    margin: 0;
  }
}

/* ------------------------------------------- rodapé, medido no material

     faixa dourada   y 4339,7 → 4452,3   (113 de altura)  #DABE8A
     monograma       y 4351,4  x 217,1   78,5 x 82,5
     ícone Instagram y 4380,2  x 483,4   24,7
     "@CORRETORACALINABASSI"  tinta y 4378,8  x 527,5 → 1019,5  22pt #18264F
     divisor         y 4371,2  x 1089,3  altura 43,6
     ícone WhatsApp  y 4376,6  x 1149,3  31,5
     "47 9941-8205"  x 1196,5 → 1436,6
   -------------------------------------------------------------------- */

@media (min-width: 1024px) {
  .footer { padding-block: 0; height: 5.8854vw; }
  /* Uma linha só, tudo centrado na faixa. O material desloca o conjunto
     3,4 para cima, mas somado ao acerto da tinta do texto isso abria uma
     diferença de 4px entre ícone e letra, visível a olho nu. */
  .footer__inner { justify-content: flex-start; gap: 0; height: 100%;
                   flex-wrap: nowrap; }

  .footer__mark { width: 4.0885vw; margin-left: 8.0781vw; }

  /* O espaçamento entre letras não é enfeite: no material cada letra vem
     separada por um espaço no próprio texto do PDF. Sem ele a linha do
     Instagram encolhe 180px e o divisor sobe junto. */
  .footer__link { font-size: 1.1458vw; letter-spacing: .402em; line-height: 1; }
  /* A caixa da linha é maior que a maiúscula, e a sobra não é igual em
     cima e embaixo: a fonte reserva espaço para acento e descida. O
     acerto vai em em, que é o único jeito de continuar centrado quando a
     largura da tela muda. */
  .footer__label { position: relative; top: 0; }

  .footer__mark + .footer__link { margin-left: 9.7813vw; gap: 1.0052vw; }
  .footer__mark + .footer__link svg { width: 1.2865vw; height: 1.2865vw; }

  /* 62,2 e não 69,8: o espaçamento entre letras também sobra depois da
     última letra, e essa sobra entra na conta do que vem a seguir. */
  .footer__sep { height: 2.2708vw; margin-left: 3.1406vw; }
  .footer__sep + .footer__link { margin-left: 3.125vw; gap: .8125vw; }
  .footer__sep + .footer__link svg { width: 1.6406vw; height: 1.6406vw; }
}