/*
 * André Backes Negócios Imobiliários
 *
 * A régua é o manual da marca: Bauhaus. Linha reta, forma funcional, assimetria
 * equilibrada, nada de ornamento. Então a elegância aqui não vem de canto
 * arredondado nem de sombra: vem de ESCALA, RESPIRO e CONTRASTE. Título grande e
 * leve, rótulo minúsculo em caixa alta com muito tracking, fotografia ocupando
 * espaço de verdade, e o dourado usado como traço, não como cor de fundo.
 *
 * Mobile-first, e isto não é estilo de escrita: o bloco base é o do celular, e
 * TODA regra de tela grande vive dentro de @media (min-width). Assim nenhuma
 * regra de acabamento escrita depois atropela o celular por ser a última.
 */

/* transição suave entre páginas onde o navegador suporta */
@view-transition {
  navigation: auto;
}

:root {
  /*
   * A marca é forte; a composição não precisa ser. O contraste foi baixado de
   * propósito: o fundo é um branco quente em vez de branco puro, o marinho das
   * áreas grandes é o #0A2546 do manual e não um quase-preto, e o dourado
   * aparece numa versão menos saturada quando cobre área — o cheio fica só nos
   * traços finos, que é onde ele brilha sem gritar.
   */
  /*
   * O dourado manda, o marinho estrutura. A marca é dourada; o azul existe
   * para dar chão a ela, não para ocupar o site inteiro.
   *
   * Por isso a paleta tem TRÊS dourados com papéis distintos: o `--dourado` do
   * manual para preenchimento e traço, um `--dourado-texto` escurecido para
   * quando a cor precisa carregar palavra sobre fundo claro (o do manual tem
   * contraste 3:1, insuficiente para leitura), e um `--dourado-claro` para
   * fundo escuro. E os fundos deixaram de ser cinza: são creme e champanhe,
   * o que dá temperatura dourada à página inteira sem uma gota de tinta.
   */
  --marinho: #0a2546;
  --marinho-fundo: #0b2647;
  --marinho-vidro: rgba(11, 38, 71, 0.78);

  --dourado: #c18a2e;
  --dourado-texto: #8f6318;
  --dourado-suave: #b8934f;
  --dourado-claro: #dcb56a;
  /* a textura dourada é o terceiro elemento da marca, ao lado das duas cores */
  --textura-dourada: linear-gradient(118deg, #e8c274 0%, #c18a2e 38%, #a4741f 62%, #dcb56a 100%);
  --brilho-dourado:
    radial-gradient(120% 80% at 12% 0%, rgba(255, 246, 222, 0.55) 0%, rgba(255, 246, 222, 0) 55%),
    radial-gradient(90% 70% at 88% 100%, rgba(120, 78, 12, 0.4) 0%, rgba(120, 78, 12, 0) 60%);

  --creme: #f8f2e6;
  --champanhe: #f1e6d0;
  --gelo: #f8f2e6;
  --branco: #fdfaf4;
  --papel: #fff;
  --texto: #26313f;
  /* medido: este cinza precisa passar 4,5:1 nos TRÊS fundos do site (branco
     quente, creme e champanhe). O anterior, #6d7784, dava 3,67 sobre champanhe
     e reprovava em AA justo nos blocos de chamada */
  --texto-suave: #5f6874;
  --linha: #ece0c9;
  --linha-escura: rgba(255, 255, 255, 0.12);

  /*
   * Cantos. O manual pede Bauhaus, e Bauhaus é linha reta — mas reto em TUDO
   * deixa a interface dura, e num site que vende apartamento de milhões a
   * sensação conta. O raio é curto de propósito: suaviza o contato sem virar
   * o cantinho arredondado de app. A marca continua reta; a interface respira.
   */
  --raio-p: 5px;
  --raio: 9px;
  --raio-g: 14px;

  --largura: 1280px;
  --respiro: 22px;
  --secao: 72px;

  --curva: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /*
   * Sem o efeito elástico. No macOS e no iOS, puxar além do topo ou do fim
   * descolava a página e mostrava o fundo branco do navegador — e o site abre e
   * fecha em escuro (cabeçalho e rodapé), então o branco piscava do nada.
   *
   * `overscroll-behavior` desliga o arrasto. A cor no html é o cinto de
   * segurança: onde o navegador insiste em esticar (Safari faz isso), o que
   * aparece é o mesmo escuro do cabeçalho, e não o branco.
   */
  overscroll-behavior-y: none;
  background: #101625;
}

body {
  margin: 0;
  background: var(--branco);
  color: var(--texto);
  font: 400 16.5px/1.65 Roboto, system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
}

body.travado {
  overflow: hidden;
}

img {
  max-width: 100%;
  display: block;
  height: auto;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  /* evita título com uma palavra órfã na última linha */
  text-wrap: balance;
  font-family: Roboto, system-ui, sans-serif;
  font-weight: 300;
  letter-spacing: -0.022em;
  line-height: 1.14;
  margin: 0 0 0.45em;
}

/* escala fluida: o mesmo texto respira no celular e domina no desktop */
h1 {
  font-size: clamp(31px, 7vw, 62px);
}

h2 {
  font-size: clamp(25px, 3.8vw, 39px);
}

h3 {
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

/*
 * O <main> não limita mais a largura: quem limita é o .container dentro de cada
 * faixa. Sem isso, a faixa escura e o hero não conseguem sangrar até a borda da
 * tela, e a home fica com tarja branca dos lados em monitor grande.
 */
main {
  display: block;
}

.container {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--respiro);
}

/* o rótulo minúsculo em caixa alta é a voz gráfica do site inteiro */
.rotulo {
  display: block;
  margin: 0 0 14px;
  font: 500 11px/1.5 Roboto, system-ui, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dourado-texto);
}

/* --------------------------------------------------------------- reveal */

.revela {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 0.9s var(--curva) var(--atraso, 0ms),
    transform 0.9s var(--curva) var(--atraso, 0ms);
}

.revela.visivel {
  opacity: 1;
  transform: none;
}

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

.botao {
  position: relative;
  border-radius: var(--raio-p);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 15px 30px;
  background: var(--dourado);
  color: #24170a;
  font: 500 14.5px/1 Roboto, system-ui, sans-serif;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid var(--dourado);
  cursor: pointer;
  overflow: hidden;
  transition: color 0.35s var(--curva), border-color 0.35s var(--curva);
}

/* o hover clareia, sem trocar de cor com corte seco */
.botao::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.22);
  opacity: 0;
  transition: opacity 0.4s var(--curva);
}

.botao:hover::after {
  opacity: 1;
}

.botao span {
  position: relative;
  z-index: 1;
}

.botao-vazado {
  background: transparent;
  color: var(--marinho);
  border-color: rgba(10, 37, 70, 0.22);
}

.botao-vazado::after {
  background: rgba(10, 37, 70, 0.06);
}

.botao-vazado:hover {
  border-color: rgba(10, 37, 70, 0.45);
}

.botao-claro {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.34);
}

.botao-claro::after {
  background: rgba(255, 255, 255, 0.14);
}

.botao-claro:hover {
  border-color: rgba(255, 255, 255, 0.7);
}

.botao-largo {
  width: 100%;
}

/*
 * Botão de contorno dourado sobre fundo escuro.
 *
 * O dourado cheio funciona quando o botão é o único ponto de ação da tela (a
 * busca do hero, o topo). Repetido em três faixas seguidas, ele vira um bloco
 * de tinta que compete com a foto. Aqui só o traço e a letra são dourados, e o
 * preenchimento entra no hover.
 */
.botao-ouro {
  background: transparent;
  color: var(--dourado-texto);
  border-color: rgba(193, 138, 46, 0.5);
}

.botao-ouro::after {
  background: rgba(193, 138, 46, 0.1);
}

.botao-ouro:hover {
  border-color: var(--dourado);
}

/* sobre fundo escuro o mesmo botão troca para o dourado claro, que é o tom
   calibrado para escuro (o outro sumiria) */
.trilho .botao-ouro,
.faixa-escura .botao-ouro,
.hero .botao-ouro {
  color: var(--dourado-claro);
  border-color: rgba(220, 181, 106, 0.65);
}

.trilho .botao-ouro::after,
.faixa-escura .botao-ouro::after,
.hero .botao-ouro::after {
  background: rgba(220, 181, 106, 0.16);
}

.trilho .botao-ouro:hover,
.faixa-escura .botao-ouro:hover,
.hero .botao-ouro:hover {
  color: #fff;
  border-color: var(--dourado-claro);
}

/*
 * O WhatsApp do cabeçalho. Era o sétimo link de uma fileira de sete, com o
 * mesmo peso de "Frente-mar" — e é a conversão da página inteira.
 */
.botao-topo {
  border-bottom: 1px solid var(--dourado);
}

/* dentro do menu do celular ele herdava o corpo 26px dos links e virava um
   bloco dourado do tamanho da tela */
.menu .botao-topo {
  align-self: flex-start;
  min-height: 0;
  padding: 14px 26px;
  font: 500 15px/1 Roboto, system-ui, sans-serif;
  letter-spacing: 0.01em;
}

.botao-topo:hover {
  color: var(--marinho);
}

/* link com a linha dourada que recolhe no hover */
.link-seta {
  position: relative;
  display: inline-block;
  padding: 14px 0 10px;
  font: 500 15px/1.2 Roboto, system-ui, sans-serif;
  letter-spacing: 0.01em;
  color: var(--dourado-texto);
  text-decoration: none;
}

.link-seta::before {
  /* alvo de 44px para o dedo sem mexer no desenho: a faixa invisível cresce
     para cima e para baixo a partir do meio do texto, e o toque nela é toque
     no link. Em algumas faixas o padding do link é zero de propósito. */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

.link-seta::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--dourado);
  transform-origin: left;
  transition: transform 0.45s var(--curva);
}

.link-seta:hover::after {
  transform: scaleX(0.35);
}

/* ---------------------------------------------------------------- topo */

.topo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px var(--respiro);
  /*
   * O topo atravessa a tela, mas o logo e o menu param onde a GRADE para.
   *
   * Sem isto, em monitor largo o cabeçalho usava a tela inteira enquanto o
   * conteúdo usava a coluna de 1280px: numa tela de 1920 o logo nascia 320px
   * à esquerda do título do hero, e a página inteira parecia torta. O fundo
   * de vidro continua de borda a borda; só o conteúdo recua.
   *
   * Em tela menor que a grade o max() devolve o respiro normal, então esta
   * linha não muda nada no celular.
   */
  padding-inline: max(var(--respiro), calc((100% - var(--largura)) / 2 + var(--respiro)));
  transition: background 0.4s var(--curva), padding 0.4s var(--curva);
}

/* sobre o hero o topo é transparente; ao rolar, ganha vidro escuro */
/*
 * Ao rolar, o topo vira um vidro quase preto e quente, com um fio dourado por
 * baixo. Antes era uma barra azul cheia atravessando a tela — o maior peso de
 * azul do site, presente em todas as páginas o tempo todo.
 */
.rolou .topo {
  padding-block: 11px;
  background: rgba(14, 19, 32, 0.95);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(193, 138, 46, 0.42);
}

/*
 * Onde existe foto no topo (home, institucional, 404), o cabeçalho flutua
 * sobre ela: uma barra sólida cortava a capa em duas e era o maior peso de
 * azul do site, presente o tempo todo. O véu escuro em gradiente segura a
 * leitura do logo dourado sem fechar a imagem.
 *
 * Nas páginas sem capa (listagem, ficha, legais) ele continua sólido, senão o
 * logo cairia sobre o creme e sumiria.
 */
body:not(.com-capa) .topo {
  background: #101625;
  border-bottom: 1px solid rgba(193, 138, 46, 0.42);
}

.com-capa .topo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(8, 11, 18, 0.82), rgba(8, 11, 18, 0.34) 62%, transparent);
  opacity: 1;
  transition: opacity 0.4s var(--curva);
  pointer-events: none;
}

.com-capa.rolou .topo::before {
  opacity: 0;
}

.marca {
  display: flex;
  align-items: center;
  min-height: 44px;
}

/*
 * Largura fluida com teto: em 244px fixos o logo somado ao botão do menu e ao
 * respiro passava de 348px, e o cabeçalho é FIXO — ele corta em vez de rolar,
 * então num aparelho de 320px o final do logo simplesmente sumia.
 */
.marca img {
  width: min(244px, 58vw);
  height: auto;
  transition: width 0.4s var(--curva);
}

/*
 * O painel do menu (fixo, logo abaixo no HTML) desce por cima do cabeçalho e
 * cobria o logo e o próprio X: no celular não havia como fechar o menu.
 */
.marca,
.menu-botao {
  position: relative;
  z-index: 1;
}

.menu-botao {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0 9px;
  background: none;
  border: 0;
  cursor: pointer;
}

.menu-botao span {
  display: block;
  height: 1.5px;
  background: var(--dourado);
  transition: transform 0.35s var(--curva), opacity 0.2s linear;
}

.menu-aberto .menu-botao span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

.menu-aberto .menu-botao span:nth-child(2) {
  opacity: 0;
}

.menu-aberto .menu-botao span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

.menu {
  position: fixed;
  inset: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 96px var(--respiro) 36px;
  background: var(--marinho-fundo);
  transform: translateY(-100%);
  transition: transform 0.5s var(--curva);
  visibility: hidden;
}

.menu-aberto .menu {
  transform: translateY(0);
  visibility: visible;
}

.menu ul {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}

.menu a {
  display: block;
  min-height: 52px;
  padding: 14px 0;
  color: var(--branco);
  font: 300 26px/1.2 Roboto, system-ui, sans-serif;
  letter-spacing: -0.01em;
  text-decoration: none;
  border-bottom: 1px solid var(--linha-escura);
}

.menu a[aria-current='page'] {
  color: var(--dourado);
}


/* ------------------------------------------------------ painel do menu */

/*
 * O painel que desce de "Imóveis". Ele é filho do item de menu (position
 * relative), e não do body: o cabeçalho não recorta nada, então não precisa da
 * ginástica do seletor de campo.
 */
.tem-painel {
  position: relative;
}

.painel-botao {
  display: none;
  padding: 4px;
  background: none;
  border: 0;
  color: var(--dourado-claro);
  cursor: pointer;
  transition: transform 0.3s var(--curva);
}

.painel-botao[aria-expanded='true'] {
  transform: rotate(180deg);
}

.painel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  padding: 24px 26px;
}

/* sem isto o `hidden` não fecha nada: qualquer `display` declarado vence o
   `display: none` que o atributo traz do navegador */
.painel[hidden] {
  display: none;
}

.painel-titulo {
  display: block;
  margin-bottom: 12px;
  padding-bottom: 10px;
  font: 500 10px/1.4 Roboto, system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dourado-claro);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.menu .painel ul {
  display: block;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu .painel a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  min-height: 0;
  padding: 8px 0;
  border: 0;
  font: 400 15px/1.3 Roboto, system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.88);
}

/* a contagem evita o clique cego: ninguém abre "Mobiliados" para achar vazio */
.menu .painel a span {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.5);
  font-variant-numeric: tabular-nums;
}

.menu .painel a:hover {
  color: var(--dourado-claro);
}

.menu .painel a::after {
  display: none;
}

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

/*
 * HERO — a foto ocupa a área inteira, com o carimbo de projeto na base.
 *
 * O véu é LATERAL, não uma cortina sobre a imagem toda: o texto pousa na água,
 * que é a parte de tonalidade uniforme da foto, e o prédio continua com a cor
 * que o fotógrafo entregou. Escurecer a imagem inteira para o título caber por
 * cima é o erro que empobrece a maioria dos sites de imobiliária.
 */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100svh;
  padding: 116px 0 0;
  overflow: hidden;
  color: #fff;
}

.hero-fundo {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-fundo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: aproxima 1.8s var(--curva) both;
}

@keyframes aproxima {
  from {
    transform: scale(1.06);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.hero-fundo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(96deg, rgba(20, 14, 5, 0.82) 0%, rgba(20, 14, 5, 0.55) 34%, rgba(20, 14, 5, 0.08) 62%, rgba(20, 14, 5, 0) 78%),
    linear-gradient(180deg, rgba(20, 14, 5, 0.42) 0%, rgba(20, 14, 5, 0) 26%);
}

.hero-conteudo {
  position: relative;
  z-index: 1;
  /* `margin: 0 auto` do .container desliga o stretch do flex e o bloco encolhe
     para a largura do conteúdo: sem esta linha o texto do hero desalinha do
     resto do site e vai parar no meio da tela */
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 24px;
  padding-bottom: 32px;
  text-shadow: 0 1px 26px rgba(12, 8, 3, 0.5);
}

.hero h1 {
  max-width: 14ch;
  margin-bottom: 18px;
  color: #fff;
}

.linha-mascara {
  display: block;
  overflow: hidden;
}

.linha-mascara > span {
  display: block;
  transform: translateY(105%);
  animation: sobe 1s var(--curva) both;
  animation-delay: calc(var(--linha, 0) * 110ms + 260ms);
}

@keyframes sobe {
  to {
    transform: translateY(0);
  }
}

@keyframes aparece {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hero-linha {
  max-width: 44ch;
  color: rgba(255, 255, 255, 0.86);
  font-size: 17px;
  animation: aparece 1s var(--curva) both 0.6s;
}

.hero .rotulo {
  color: var(--dourado-claro);
  animation: aparece 0.9s var(--curva) both 0.15s;
}

/* ---------------------------------------------------------------- carimbo */

/*
 * O carimbo é a legenda técnica do imóvel em destaque, na base da imagem, como
 * o rodapé de uma folha de projeto. É o que faz a home mostrar produto — com
 * local, cômodos e valor — antes de a pessoa rolar um pixel.
 */
.carimbo {
  position: relative;
  z-index: 1;
  display: block;
  background: rgba(12, 8, 3, 0.58);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(220, 181, 106, 0.4);
  color: #fff;
  text-decoration: none;
  animation: aparece 1s var(--curva) both 0.95s;
  transition: background 0.4s var(--curva);
}

.carimbo:hover {
  background: rgba(12, 8, 3, 0.74);
}

/*
 * O vidro da faixa atravessa a tela, mas o conteúdo dela obedece à GRADE, como
 * o resto da página.
 *
 * Antes a faixa era solta (`max-width: none`) e os dados vinham empurrados para
 * a direita por um `margin-left: auto`. Em monitor largo o resultado era uma
 * tarja com mil pixels de vazio à esquerda, começando numa coluna que não
 * existe em nenhum outro lugar do site. Agora o primeiro dado nasce embaixo do
 * título do hero e o link fecha a linha na coluna onde o menu termina.
 */
.carimbo-grade {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 34px;
  padding: 34px var(--respiro);
}

/*
 * O selo encosta na borda direita, logo abaixo do menu, como uma etiqueta que
 * sai da lateral da imagem. Por isso o arredondamento é só do lado esquerdo:
 * o lado que toca a borda fica reto, senão a pílula parece descolada.
 */
/* o topo é fixo e termina em 81px: com `top: 0` o selo ficava atrás dele, e com
   76px ainda encostava. 92px deixa uma folga que se mantém mesmo quando o topo
   encolhe ao rolar */
.selo-destaque {
  position: absolute;
  top: 92px;
  right: 0;
  z-index: 2;
  padding: 9px 18px 9px 20px;
  border-radius: 0 0 0 100px;
  background: var(--textura-dourada);
  color: #23180a;
  font: 500 9.5px/1.3 Roboto, system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  animation: aparece 0.9s var(--curva) both 1.1s;
}

/* os dados abrem a faixa; é o `auto` da direita que joga o link para o fim */
.carimbo-dados {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px 34px;
  margin-right: auto;
}

/* o dado é o conteúdo da faixa, não uma nota de rodapé: 30px no dado e 36 no
   valor, que é o número pelo qual quem procura imóvel decide. O respiro entre
   o rótulo e o número é o que separa os dois níveis de leitura */
.carimbo-dado {
  display: flex;
  flex-direction: column;
  gap: 11px;
  font: 300 30px/1.1 Roboto, system-ui, sans-serif;
}

.carimbo-num {
  text-align: center;
}

.carimbo-dado b {
  font: 500 10px/1.3 Roboto, system-ui, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.carimbo-valor {
  color: var(--dourado-claro);
  font-size: 36px;
  font-variant-numeric: tabular-nums;
}

/* o respiro à direita é o lugar do botão flutuante do WhatsApp: sem ele, o
   flutuante pousa exatamente sobre o "Ver o imóvel" */
.carimbo-ir {
  margin-left: 34px;
  margin-right: 62px;
  padding-bottom: 3px;
  font: 500 14.5px/1.2 Roboto, system-ui, sans-serif;
  border-bottom: 1px solid var(--dourado);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ régua */

/*
 * Os números do estoque. Antes eram uma caixa branca com borda sobre fundo
 * quase branco: a moldura sumia e o "82" saía menor que o texto da seção
 * seguinte. Numa imobiliária de alto padrão esse é o argumento de autoridade,
 * então o número passa a mandar e a caixa some. O que resta é legenda de
 * prancha: filete à esquerda de cada coluna, número grande, rótulo embaixo.
 */
.regua-topo {
  max-width: 34rem;
  margin-bottom: 40px;
}

.regua-topo p {
  margin: 12px 0 0;
  font-size: 15px;
  color: var(--texto-suave);
}

.regua {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* o mesmo vão das outras grades de quatro colunas da página: com gap 0 as
     colunas caíam em 247/547/847/1147 e as do resto do site em 247/555/862/1170,
     quase juntas, que é o desalinho que mais salta aos olhos */
  gap: 34px 30px;
  margin: 0;
}

/* o rótulo vem antes no HTML, como manda a lista de definição; na tela ele
   aparece embaixo do número, que é quem chama o olho */
.regua > div {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  padding-left: 24px;
  border-left: 1px solid var(--linha);
}

.regua dt {
  margin-top: 12px;
  font: 400 13.5px/1.35 Roboto, system-ui, sans-serif;
  color: var(--texto-suave);
}

.regua dd {
  margin: 0;
  font: 300 clamp(46px, 4.6vw, 66px)/0.92 Roboto, system-ui, sans-serif;
  color: var(--dourado-texto);
  font-variant-numeric: tabular-nums;
}

.rolar {
  display: none;
}




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

.faixa {
  padding: var(--secao) 0;
}

/* seção sobre creme: a alternância é o que dá temperatura à página sem tinta */
.faixa-creme {
  background: var(--creme);
}

/* quando a faixa está DENTRO de um container, ela precisa vazar para a borda */
.faixa-sangra {
  margin-left: calc(var(--respiro) * -1);
  margin-right: calc(var(--respiro) * -1);
  padding-left: var(--respiro);
  padding-right: var(--respiro);
}

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

/*
 * Seção que é só um cabeçalho: o filete dele já separa da seção seguinte, e o
 * respiro de baixo somado ao de cima da próxima abria um vazio entre dois
 * filetes. Foi o que sobrou quando a régua de números saiu daqui.
 */
.faixa-so-cabecalho {
  padding-bottom: 0;
}

.faixa-so-cabecalho .faixa-cabecalho {
  margin-bottom: 0;
}

/*
 * Seção que termina numa faixa sangrada (as fotos dos caminhos): o respiro de
 * baixo vira uma tira branca entre a foto e a seção seguinte, que não separa
 * nada — só abre um buraco. A foto encosta direto na próxima cor.
 */
.faixa-ate-o-fim {
  padding-bottom: 0;
}

/* logo abaixo do carimbo do hero: respiro menor em cima, para ler como
   continuação da capa e não como bloco à deriva */
.faixa-regua {
  padding-top: calc(var(--secao) * 0.62);
}

/*
 * Cabeçalho de seção que ocupa a grade inteira: título de um lado, o texto que
 * explica a seção do outro. A versão de uma coluna só deixava o título curto
 * boiando com meia tela vazia à direita, e o link de "ver tudo" pendurado
 * embaixo dele sem alinhar com nada.
 */
.cabecalho-lado {
  margin-top: 18px;
}

/* o botão vinha colado no fim do parágrafo (4px), sem respiro nenhum */
.cabecalho-lado .botao {
  margin-top: 22px;
}

.cabecalho-lado p {
  margin: 0 0 4px;
  max-width: 34rem;
  color: var(--texto-suave);
}

.faixa-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 42px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--linha);
}

/* o link fecha a linha do título, alinhado pela base e sem sublinhado solto */
.faixa-cabecalho .link-seta {
  padding-bottom: 0;
  white-space: nowrap;
}

/* na versão larga o link ganha respiro do parágrafo e deixa de ficar colado */
.faixa-cabecalho-largo .link-seta {
  padding-top: 6px;
}

.faixa-cabecalho h2 {
  max-width: 18ch;
  margin: 0;
}

.secao-linha {
  max-width: 58ch;
  color: var(--texto-suave);
  font-size: 17px;
}

/*
 * O bloco de destaque da home usa a TEXTURA DOURADA do manual, não o marinho.
 * É o elemento da marca que estava sobrando na gaveta, e é o que faz o dourado
 * dominar a página em vez de aparecer só em filete. O texto vira marinho, que
 * sobre dourado tem contraste de sobra.
 */
/*
 * A faixa dos bairros.
 *
 * Era dourado cheio de ponta a ponta, com o texto em azul-marinho por cima: o
 * maior bloco de tinta da página, e a contagem de imóveis quase sumia dentro
 * dele. O dourado é a cor de destaque da marca — usado como fundo de uma seção
 * inteira, ele deixa de destacar. Aqui entra o mesmo escuro das faixas dos
 * caminhos, e quem fica dourado é o que importa: o filete, a contagem e o nome
 * do bairro sob o ponteiro.
 */
.faixa-escura {
  position: relative;
  /* o mesmo preto QUENTE do carimbo do hero (rgba(12, 8, 3)), não um escuro
     azulado: o site inteiro é dourado sobre marrom, e um preto frio aqui
     abriria uma terceira família de cor no meio da página */
  background: #100c05;
  color: #fff;
  border: 0;
}

/*
 * O fundo da seção: a foto do bairro, desfocada e rebaixada. Existe para o
 * painel de vidro ter o que borrar — vidro sobre cor chapada não é vidro, é
 * um retângulo mais claro.
 */
/* o seletor precisa vencer o `.faixa-escura > *` que empurra os filhos para
   `position: relative`: com ele o fundo entrava no fluxo, ganhava 2.681px de
   altura e esticava a seção inteira */
.faixa-escura .bairros-fundo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.faixa-escura .bairros-fundo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* a escala compensa a borda apagada que o blur come nas quatro pontas */
  transform: scale(1.14);
  filter: blur(30px) saturate(0.8);
  opacity: 0.42;
}

/* véu quente por cima da foto, para o texto branco não depender da imagem */
.faixa-escura::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    115deg,
    rgba(16, 12, 5, 0.92) 0%,
    rgba(16, 12, 5, 0.78) 46%,
    rgba(16, 12, 5, 0.6) 100%
  );
  pointer-events: none;
}

/* o painel de vidro que segura a lista */
.vidro {
  position: relative;
  padding: 28px 24px;
  /* a MESMA cor do fundo da seção, só que translúcida: o vidro tem que se
     dissolver na página, não introduzir um segundo tom de marrom. O que revela
     o painel é o desfoque e o filete dourado, não uma mudança de cor */
  background: rgba(16, 12, 5, 0.55);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  border: 1px solid rgba(220, 181, 106, 0.22);
  border-radius: var(--raio-g);
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.8);
}

/* o fio dourado no topo é o que amarra esta seção às faixas de cima */
.faixa-escura::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(193, 138, 46, 0) 0%,
    rgba(193, 138, 46, 0.55) 50%,
    rgba(193, 138, 46, 0) 100%
  );
  pointer-events: none;
}

.faixa-escura > * {
  position: relative;
  z-index: 1;
}

.faixa-escura h2 {
  color: #fff;
}

.faixa-escura p {
  color: rgba(255, 255, 255, 0.78);
}

.faixa-escura .rotulo {
  color: var(--dourado-claro);
}

/* -------------------------------------------------------------- trilhos */

/*
 * Os caminhos de entrada, em faixas de largura inteira.
 *
 * A grade de três cartões resolvia em tamanho de anúncio a decisão mais
 * importante da home ("quero frente-mar" ou "quero entrar na planta"). Aqui
 * cada caminho ocupa a tela por vez, com a foto sangrando de ponta a ponta e o
 * texto pousado sobre o véu, na mesma gramática do hero.
 */
.trilhos {
  display: flex;
  flex-direction: column;
  /* o fundo da página aparece entre as faixas: com o filete de 10px elas liam
     como uma única foto cortada, e não como três caminhos separados */
  gap: 22px;
}

/* o separador com os chevrons da marca entre um caminho e o outro */
.trilho-sep {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 var(--respiro);
  color: var(--dourado);
}

.trilho-sep::before,
.trilho-sep::after {
  content: '';
  flex: 1;
  height: 1px;
}

.trilho-sep::before {
  background: linear-gradient(90deg, rgba(193, 138, 46, 0) 0%, rgba(193, 138, 46, 0.5) 100%);
}

.trilho-sep::after {
  background: linear-gradient(90deg, rgba(193, 138, 46, 0.5) 0%, rgba(193, 138, 46, 0) 100%);
}

.trilho-sep svg {
  flex: 0 0 auto;
  opacity: 0.85;
}

.trilho {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 340px;
  padding: 54px 0;
  overflow: hidden;
  color: var(--branco);
  text-decoration: none;
  background: #0d1220;
}

.trilho img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--curva);
}

.trilho:hover img {
  transform: scale(1.035);
}

/*
 * Véu lateral, não cortina sobre a foto inteira: o outro lado da imagem — que
 * costuma ser o mar, a piscina ou a varanda — continua com a cor que o
 * fotógrafo entregou. É a mesma decisão do hero.
 *
 * As paradas são fechadas de propósito. Num bloco largo e baixo, um gradiente
 * que só chega a transparente no fim cobre a faixa inteira: a foto do
 * lançamento sumiu por completo atrás dele, e sobrou um retângulo preto.
 */
.trilho-veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    95deg,
    rgba(8, 11, 18, 0.84) 0%,
    rgba(8, 11, 18, 0.72) 24%,
    rgba(8, 11, 18, 0.46) 46%,
    rgba(8, 11, 18, 0.2) 68%,
    rgba(8, 11, 18, 0.04) 86%,
    rgba(8, 11, 18, 0) 100%
  );
}

/*
 * As faixas alternam o lado: a primeira lê da esquerda, a segunda da direita.
 * Além do ritmo, é o que evita que três blocos seguidos com o mesmo
 * enquadramento pareçam a mesma faixa repetida três vezes.
 */
/* `nth-of-type`, não `nth-child`: os separadores também são filhos de
   `.trilhos`, então o `even` passou a cair neles e a alternância sumiu. Contando
   por tipo, só as faixas (que são `a`) entram na conta. */
.trilho:nth-of-type(even) .trilho-veu {
  background: linear-gradient(
    265deg,
    rgba(8, 11, 18, 0.84) 0%,
    rgba(8, 11, 18, 0.72) 24%,
    rgba(8, 11, 18, 0.46) 46%,
    rgba(8, 11, 18, 0.2) 68%,
    rgba(8, 11, 18, 0.04) 86%,
    rgba(8, 11, 18, 0) 100%
  );
}

.trilho:nth-of-type(even) .trilho-conteudo {
  align-items: flex-end;
  text-align: right;
}

.trilho-conteudo {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* sem a largura explícita o container encolhe ao conteúdo (é um item flex) e
     o `margin: 0 auto` centraliza esse bloco estreito no meio da faixa, em vez
     de alinhar o texto com o resto da página */
  width: 100%;
  /* com o véu mais leve, é a sombra que segura a leitura sobre a foto clara,
     sem precisar fechar a imagem com uma cortina */
  text-shadow: 0 1px 26px rgba(8, 6, 2, 0.85), 0 1px 4px rgba(8, 6, 2, 0.5);
}

.trilho-num {
  font: 500 11px/1.4 Roboto, system-ui, sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dourado-claro);
  font-variant-numeric: tabular-nums;
}

.trilho-titulo {
  margin-top: 10px;
  font: 300 clamp(38px, 5vw, 62px)/1.02 Roboto, system-ui, sans-serif;
  letter-spacing: -0.025em;
}

/* o filete que separa o título do subtítulo: a mesma marca de prancha */
.trilho-sub {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(220, 181, 106, 0.5);
  color: rgba(255, 255, 255, 0.9);
}

.trilho-texto {
  max-width: 34rem;
  margin-top: 16px;
  font-size: 16.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.86);
}

.trilho-botao {
  margin-top: 28px;
}

/* ---------------------------------------------------------------- cards */

.grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px 26px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform 0.45s var(--curva);
}

.card:hover {
  transform: translateY(-4px);
}

.card[hidden] {
  display: none;
}

.card-foto {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--raio);
  background: var(--gelo);
  transition: box-shadow 0.45s var(--curva);
}

.card:hover .card-foto {
  box-shadow: 0 20px 44px -22px rgba(11, 38, 71, 0.5);
}

.card-foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 1s var(--curva);
}

.card:hover .card-foto img {
  transform: scale(1.03);
}

.selos {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  z-index: 1;
}

/* o selo é dourado: é o detalhe de marca que aparece dezenas de vezes numa
   listagem, e era o último retângulo azul do card */
.selo {
  padding: 7px 13px;
  border-radius: 100px;
  background: var(--textura-dourada);
  color: #23180a;
  font: 500 10px/1.3 Roboto, system-ui, sans-serif;
  letter-spacing: 0.06em;
}

/* contador de fotos, no canto oposto ao selo */
.conta-fotos {
  position: absolute;
  right: 12px;
  bottom: 12px;
  border-radius: 100px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  background: rgba(16, 22, 37, 0.72);
  backdrop-filter: blur(6px);
  color: #fff;
  font: 500 12px/1 Roboto, system-ui, sans-serif;
}

.card-corpo {
  padding: 18px 0 0;
}

.card-local {
  margin: 0 0 8px;
  font: 500 10.5px/1.4 Roboto, system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.card-preco {
  margin: 0 0 6px;
  font: 300 30px/1 Roboto, system-ui, sans-serif;
  color: var(--dourado-texto);
}

.card-titulo {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 400;
  color: var(--texto-suave);
}

.card-titulo a {
  text-decoration: none;
}

/* o link do título cobre o card inteiro: alvo grande no dedo, um só link */
.card-titulo a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.card-ficha {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--linha);
  font-size: 14px;
  color: var(--texto-suave);
}

/* -------------------------------------------------------------- bairros */

.bairros {
  display: grid;
  gap: 0;
}

/* item de grade não encolhe abaixo do próprio conteúdo sem isto: "Centro,
   Balneário Camboriú" mais "34 imóveis · a partir de R$ 1,48 mi" empurravam o
   painel para 361px numa tela de 320 */
.bairros > * {
  min-width: 0;
}

.bairro-linha {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 20px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  text-decoration: none;
  color: #fff;
  transition: padding-left 0.5s var(--curva), color 0.35s var(--curva);
}

.bairro-linha:hover {
  padding-left: 12px;
  color: var(--dourado-claro);
}

.bairro-nome {
  /* menor do que era: agora a linha divide espaço com o preço de entrada, e em
     44px o "Centro, Balneário Camboriú" quebrava em três linhas */
  font: 300 clamp(24px, 3.4vw, 34px)/1.15 Roboto, system-ui, sans-serif;
  letter-spacing: -0.02em;
}

.bairro-conta {
  font: 500 12px/1.5 Roboto, system-ui, sans-serif;
  /* na tela estreita a contagem desce para a linha de baixo em vez de brigar
     por espaço com o nome do bairro */
  text-align: left;
  letter-spacing: 0.06em;
  /* sobre o dourado a contagem sumia; sobre o escuro ela volta a ser legível
     sem precisar competir com o nome do bairro */
  color: rgba(255, 255, 255, 0.58);
  white-space: nowrap;
  transition: color 0.35s var(--curva);
}

.bairro-linha:hover .bairro-conta {
  color: var(--dourado-claro);
}

.bairro-fotos {
  display: none;
}

/*
 * As cidades da página institucional. Eram uma lista de marcadores com filete à
 * esquerda e o texto solto ao lado da contagem: o filete curto sob cada item
 * lia como sublinhado quebrado. Aqui viram linha, como a lista de bairros da
 * home — nome de um lado, contagem do outro, divisor inteiro entre elas.
 */
.cidades-lista {
  margin-top: 30px;
}

.cidade-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--linha);
  color: var(--texto);
  text-decoration: none;
  transition: padding-left 0.45s var(--curva), color 0.35s var(--curva);
}

.cidade-linha:hover {
  padding-left: 10px;
  color: var(--dourado-texto);
}

.cidade-nome {
  font-size: 19px;
}

.cidade-conta {
  font: 500 12.5px/1.4 Roboto, system-ui, sans-serif;
  letter-spacing: 0.04em;
  color: var(--texto-suave);
  white-space: nowrap;
}

/* --------------------------------------------------------- comodidades */

/*
 * A lista de comodidades da ficha, cada uma com o ícone da sua família. O ícone
 * não é enfeite: numa lista de vinte itens iguais em peso, ele é o que deixa a
 * pessoa achar "piscina" ou "garagem" sem ler os vinte.
 */
.comodidades {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 22px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.comodidades li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--linha);
  font-size: 15.5px;
  color: var(--texto);
}

.comodidade-icone {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--dourado-texto);
  background: var(--gelo);
  border-radius: 50%;
}

.comodidade-icone svg {
  width: 18px;
  height: 18px;
}

/* -------------------------------------------------------------- filtros */

.filtros {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 0 0 40px;
  padding: 22px;
  border-radius: var(--raio-g);
  background: var(--gelo);
}

.filtros label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  font: 500 10.5px/1.4 Roboto, system-ui, sans-serif;
  letter-spacing: 0.015em;
  color: var(--texto-suave);
}

/* no celular a grade é de duas colunas: o último campo sozinho na linha fica
   estreito demais para o rótulo caber, então ele ocupa a linha inteira */
.filtros .campo:last-of-type {
  grid-column: 1 / -1;
}

/*
 * A contagem saiu do rodapé do formulário e virou a linha que abre a lista.
 *
 * Dentro da caixa de filtros ela era um rótulo de 11px preso no canto: a
 * informação mais importante da página — quantos imóveis sobraram do filtro —
 * ficava menor que o nome dos campos. Aqui ela vem em corpo de leitura, com o
 * filete que separa a busca do resultado.
 */
.lista-resumo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  margin: 34px 0 26px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--linha);
}

.filtros-resultado {
  margin: 0;
  font: 400 19px/1.3 Roboto, system-ui, sans-serif;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

.lista-nota {
  margin: 0;
  font-size: 13px;
  color: var(--texto-suave);
}

/* o cabeçalho da listagem não precisa do filete do .faixa-cabecalho: quem
   separa a busca do resultado é a linha da contagem, logo abaixo */
.lista-topo {
  margin-bottom: 30px;
  padding-bottom: 0;
  border-bottom: 0;
}

/*
 * O h1 padrão tem margem própria (22px em cima). Dentro do cabeçalho largo quem
 * manda no respiro é a grade, senão o título e o texto ao lado — que nascem na
 * mesma linha — saem defasados por essa margem.
 */
.faixa-cabecalho-largo > .titulo-pagina {
  margin-bottom: 0;
}

.sem-resultado {
  padding: 32px;
  border-radius: var(--raio);
  background: var(--gelo);
  color: var(--texto-suave);
}

/* ---------------------------------------------------------------- ficha */

.ficha-topo {
  padding: 26px 0;
}

.ficha-topo h1 {
  font-size: clamp(28px, 5.6vw, 50px);
  max-width: 20ch;
  margin: 10px 0 10px;
}

.ficha-chamada {
  margin: 0 0 4px;
  font: 300 19px/1.4 Roboto, system-ui, sans-serif;
  color: var(--dourado-texto);
}

.ficha-referencia {
  margin: 0;
  font: 500 10.5px/1.4 Roboto, system-ui, sans-serif;
  letter-spacing: 0.015em;
  color: var(--texto-suave);
}

/*
 * Mosaico: uma foto grande e duas menores. Dá escala de revista à ficha, em vez
 * da tira de miniaturas de portal.
 */
.galeria {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.galeria-principal {
  cursor: zoom-in;
  overflow: hidden;
  border-radius: var(--raio);
  background: var(--gelo);
}

.galeria-principal img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 1.2s var(--curva);
}

.galeria-principal:hover img {
  transform: scale(1.03);
}

.galeria-secundaria {
  display: none;
  border-radius: var(--raio);
}

.galeria-tiras {
  display: flex;
  gap: 8px;
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.galeria-tiras::-webkit-scrollbar {
  display: none;
}

.tira {
  flex: 0 0 104px;
  border-radius: var(--raio-p);
  overflow: hidden;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.4s var(--curva);
}

.tira img {
  width: 104px;
  height: 74px;
  object-fit: cover;
}

.tira.ativa,
.tira:hover {
  opacity: 1;
}

.ficha {
  display: grid;
  gap: 44px;
  margin-top: 40px;
}

.ficha-numeros {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px 20px;
  margin: 0 0 36px;
  padding: 26px 0;
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
}

/* mesma ideia da linha acima: célula ímpar sozinha não deixa buraco */
.ficha-numeros div:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.ficha-numeros dt {
  font: 500 10px/1.4 Roboto, system-ui, sans-serif;
  letter-spacing: 0.2em;
  color: var(--texto-suave);
}

.ficha-numeros dd {
  margin: 8px 0 0;
  font: 300 27px/1 Roboto, system-ui, sans-serif;
}

/*
 * 17,5px numa tela de 390px dá sete palavras por linha: o texto vira uma coluna
 * estreita e altíssima, cansativa de ler. No desktop, onde a linha é larga, o
 * corpo maior volta.
 */
.ficha-texto p {
  font-size: 15.5px;
  line-height: 1.62;
  max-width: 62ch;
}

.ficha-bloco {
  padding-top: 34px;
  margin-top: 34px;
  border-top: 1px solid var(--linha);
}

.ficha-bloco h2 {
  font-size: 23px;
  margin-bottom: 18px;
}

.caracteristicas {
  display: grid;
  /* minmax(0,…) porque item de grade não encolhe abaixo do próprio conteúdo:
     "Sacada com churrasqueira" numa coluna de 135px empurraria a grade */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
}

.caracteristicas li {
  padding-left: 16px;
  border-left: 1px solid var(--dourado);
}

.ficha-descricao p {
  color: var(--texto-suave);
  margin: 0 0 6px;
}

.etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.etiquetas a {
  display: inline-block;
  padding: 15px 18px;
  border-radius: 100px;
  background: var(--gelo);
  font: 500 11px/1.3 Roboto, system-ui, sans-serif;
  letter-spacing: 0.015em;
  text-decoration: none;
  transition: background 0.35s var(--curva), color 0.35s var(--curva);
}

.etiquetas a:hover {
  background: var(--textura-dourada);
  color: #23180a;
}

/*
 * A caixa de preço era um retângulo marinho, o maior bloco de azul do site, e
 * justamente no lugar onde o visitante decide. Agora é creme com a textura
 * dourada como filete no topo: o valor ganha destaque pela tipografia, não por
 * um fundo escuro.
 */
.caixa-preco {
  padding: 32px 30px;
  border-radius: var(--raio-g);
  overflow: hidden;
  background: var(--creme);
  color: var(--texto);
  border-top: 4px solid transparent;
  border-image: var(--textura-dourada) 1;
}

/*
 * BUG corrigido: este rótulo era branco, de quando a caixa de preço tinha fundo
 * marinho. Quando ela passou a ser creme, o "Valor de venda" ficou branco sobre
 * creme — 1,11:1, ou seja, invisível, na ficha e na barra de ação do celular.
 * A cor agora acompanha o fundo claro.
 */
.caixa-rotulo {
  margin: 0;
  font: 500 10px/1.4 Roboto, system-ui, sans-serif;
  letter-spacing: 0.015em;
  color: var(--texto-suave);
}

/* onde a caixa vive sobre escuro, o rótulo volta a ser claro */
.faixa-escura .caixa-rotulo,
.trilho .caixa-rotulo {
  color: rgba(255, 255, 255, 0.62);
}

.caixa-valor {
  margin: 10px 0 24px;
  font: 300 clamp(32px, 6vw, 44px)/1 Roboto, system-ui, sans-serif;
  color: var(--dourado-texto);
}

.caixa-preco .botao + .botao {
  margin-top: 10px;
}

.caixa-preco .botao-claro {
  color: var(--marinho);
  border-color: rgba(10, 37, 70, 0.28);
}

.caixa-preco .botao-claro::after {
  background: rgba(10, 37, 70, 0.06);
}

.caixa-nota {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--texto-suave);
}

/* ------------------------------------------------------------- lightbox */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 16px;
  background: rgba(6, 21, 39, 0.96);
  animation: aparece 0.3s var(--curva) both;
}

/* `display:flex` numa classe vence o `hidden` do HTML, e o lightbox nascia
   aberto cobrindo a ficha inteira. Precisa ser dito explicitamente. */
.lightbox[hidden] {
  display: none;
}

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.lightbox button {
  position: absolute;
  min-width: 48px;
  min-height: 48px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--branco);
  font: 400 20px/1 Roboto, system-ui, sans-serif;
  cursor: pointer;
  transition: background 0.3s var(--curva);
}

.lightbox button:hover {
  background: rgba(255, 255, 255, 0.12);
}

.lightbox-fechar {
  top: 14px;
  right: 14px;
}

.lightbox-anterior {
  left: 14px;
  top: 50%;
}

.lightbox-proxima {
  right: 14px;
  top: 50%;
}

.lightbox-conta {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
  font: 500 11px/1 Roboto, system-ui, sans-serif;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.7);
}

/* ------------------------------------------------------------- conteúdo */

.dois {
  display: grid;
  gap: 40px;
}

.dois-topo {
  margin-top: 30px;
}

/*
 * A lista de números ao lado de um texto.
 *
 * A cor padrão é a do fundo CLARO, que é onde ela aparece hoje. Antes o padrão
 * era branco (herdado de quando o bloco vivia sobre fundo escuro) e havia uma
 * correção em `.lista-numeros-lado .lista-numeros` — um seletor DESCENDENTE,
 * que não casa quando as duas classes estão no mesmo elemento. Era o caso da
 * home: o rótulo ficava branco sobre creme e só dava para ler selecionando o
 * texto com o mouse.
 */
.lista-numeros {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lista-numeros li {
  border-bottom: 1px solid var(--linha);
}

.lista-numeros a,
.lista-numeros .linha {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 18px 0;
  color: var(--texto-suave);
  font: 400 15px/1.4 Roboto, system-ui, sans-serif;
  text-decoration: none;
  transition: padding-left 0.45s var(--curva), color 0.35s var(--curva);
}

.lista-numeros a:hover {
  padding-left: 10px;
  color: var(--dourado-texto);
}

.lista-numeros strong {
  min-width: 2.6ch;
  font: 300 42px/1 Roboto, system-ui, sans-serif;
  letter-spacing: -0.02em;
  color: var(--dourado-texto);
  font-variant-numeric: tabular-nums;
}

/*
 * A régua de números em linha, abaixo de um texto: quatro colunas, como todas
 * as outras grades da página.
 */
.lista-numeros-linha {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 30px;
  margin-top: 46px;
}

.lista-numeros-linha li {
  border-bottom: 0;
  border-left: 1px solid var(--linha);
  padding-left: 22px;
}

.lista-numeros-linha .linha {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 4px 0 26px;
}

.lista-numeros-linha strong {
  font-size: 40px;
}

/* sobre fundo escuro (a página institucional) as cores se invertem */
.faixa-escura .lista-numeros li {
  border-bottom-color: rgba(255, 255, 255, 0.16);
}

.faixa-escura .lista-numeros a,
.faixa-escura .lista-numeros .linha {
  color: rgba(255, 255, 255, 0.72);
}

.faixa-escura .lista-numeros strong {
  color: #fff;
}


.passos {
  counter-reset: passo;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
}

.passos li {
  counter-increment: passo;
  position: relative;
  padding: 0 0 22px 52px;
  color: var(--texto-suave);
}

.passos strong {
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
  color: var(--texto);
}


.passos li::before {
  content: counter(passo, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -2px;
  font: 300 22px/1 Roboto, system-ui, sans-serif;
  color: var(--dourado);
}

.marcadores {
  margin: 0;
  padding: 0;
  list-style: none;
}

.marcadores li {
  padding: 15px 0 15px 18px;
  border-left: 1px solid var(--dourado);
  margin-bottom: 10px;
}

/* o nome da cidade é link de navegação, não texto corrido: precisa do alvo do dedo */
.marcadores a {
  display: inline-block;
  padding: 6px 0;
  text-decoration: none;
  border-bottom: 1px solid var(--dourado);
}

.texto-longo p {
  max-width: 60ch;
}

.chamada {
  margin-top: var(--secao);
  border-radius: var(--raio-g);
  padding: 56px var(--respiro);
  background: var(--champanhe);
}

.chamada h2 {
  margin-top: 0;
  max-width: 16ch;
}

.chamada p {
  max-width: 52ch;
  color: var(--texto-suave);
}

/* o "ver mais" da listagem, abaixo da grade */
.lista-mais {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 48px 0 8px;
}

.lista-mais[hidden] {
  display: none;
}

.lista-mais-conta {
  margin: 0;
  font: 500 12.5px/1.4 Roboto, system-ui, sans-serif;
  letter-spacing: 0.015em;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}

/*
 * Chamada centrada: usada onde o bloco fecha a página e não divide espaço com
 * outra coluna. Alinhado à esquerda, o texto curto deixava metade do bloco
 * vazia e o botão sozinho num canto.
 */
.chamada-centro {
  text-align: center;
}

/*
 * A chamada que sangra de ponta a ponta, como no fim da home. Sem raio e sem
 * margem: é uma faixa, não um cartão. O padding lateral acompanha o container
 * para o texto nascer no mesmo eixo do resto da página.
 */
.chamada-larga {
  margin-top: 0;
  border-radius: 0;
}

.chamada-centro h2,
.chamada-centro p {
  margin-left: auto;
  margin-right: auto;
}

.chamada-centro h2 {
  max-width: 22ch;
}

.chamada-centro p {
  max-width: 56ch;
}

.chamada-centro .botao {
  margin-top: 8px;
}

/* as provas ao lado da chamada: cada uma com o filete dourado da casa */
.chamada-provas {
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.chamada-provas li {
  padding: 0 0 16px 20px;
  margin-bottom: 16px;
  border-left: 1px solid var(--dourado);
  font-size: 15px;
  color: var(--texto-suave);
}

.chamada-provas li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

.chamada-provas strong {
  display: block;
  margin-bottom: 3px;
  font-weight: 500;
  color: var(--texto);
}

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

.caixa-formulario {
  padding: 32px 26px;
  border-radius: var(--raio-g);
  background: var(--gelo);
  border-top: 2px solid var(--dourado);
}

.caixa-formulario h2 {
  margin-top: 0;
  font-size: 25px;
}

.caixa-formulario label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
  font: 500 10.5px/1.4 Roboto, system-ui, sans-serif;
  letter-spacing: 0.015em;
  color: var(--texto-suave);
}

.caixa-formulario input,
.caixa-formulario textarea {
  min-height: 50px;
  padding: 14px;
  background: var(--branco);
  color: var(--texto);
  font: 400 16px/1.4 Roboto, system-ui, sans-serif;
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  transition: border-color 0.3s var(--curva);
}

.caixa-formulario input:focus,
.caixa-formulario textarea:focus {
  border-color: var(--dourado);
  outline: none;
}

.caixa-formulario textarea {
  resize: vertical;
}

.form-aviso {
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--marinho);
}

.form-nota {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--texto-suave);
}

/* ------------------------------------------------------ barra de ação */

/*
 * O WhatsApp flutuante, no verde do próprio aplicativo (#25d366) — é a cor que
 * a pessoa reconhece antes de ler qualquer coisa, e é ela que fica.
 *
 * A escrita é branca, como no aplicativo. Só que branco sobre o verde vivo dá
 * 1,98:1 e o convite sairia ilegível — por isso o fundo fecha para o verde
 * escuro do próprio WhatsApp no momento em que o texto aparece, e aí o branco
 * volta a ter 5:1. Parado, o botão é o verde de sempre; falando, é o verde da
 * barra do app.
 *
 * O convite abre no ponteiro. Ele vive no HTML o tempo todo e é escondido por
 * LARGURA, não por `display: none`: assim o leitor de tela continua anunciando
 * o que o botão faz.
 */
.zap {
  position: fixed;
  z-index: 35;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0 14px;
  color: #fff;
  background: #25d366;
  border-radius: 999px;
  box-shadow: 0 10px 26px -12px rgba(6, 60, 33, 0.45);
  text-decoration: none;
  transition: box-shadow 0.35s var(--curva), background 0.35s var(--curva);
}

.zap-icone {
  flex: 0 0 auto;
}

.zap-texto {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  color: #fff;
  font: 500 14px/1 Roboto, system-ui, sans-serif;
  letter-spacing: 0.01em;
  transition: max-width 0.5s var(--curva), opacity 0.35s var(--curva),
    margin-left 0.5s var(--curva);
}

.zap:hover,
.zap:focus-visible {
  background: #0f7d70;
  box-shadow: 0 14px 32px -12px rgba(6, 60, 33, 0.5);
}

.zap:hover .zap-texto,
.zap:focus-visible .zap-texto {
  max-width: 15rem;
  margin-left: 11px;
  opacity: 1;
}

/*
 * Na ficha do celular o flutuante SOME.
 *
 * Ali já existe a barra de ação fixa, com o valor e o WhatsApp daquele imóvel
 * específico — que é uma conversa melhor do que a genérica. Com os dois na
 * tela eram dois botões verdes de WhatsApp a 20px um do outro, e o de cima
 * ainda pousava em cima da lista de características.
 *
 * No desktop a barra não existe, então o flutuante continua.
 */
.pagina-ficha .zap {
  display: none;
}

/* sem ponteiro não existe hover: o convite fica aberto desde o começo */
@media (hover: none) {
  .zap-texto {
    max-width: 15rem;
    margin-left: 11px;
    opacity: 1;
  }
}

.barra-acao {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: rgba(253, 250, 244, 0.94);
  backdrop-filter: blur(14px);
  border-top: 3px solid transparent;
  border-image: var(--textura-dourada) 1;
}

.barra-acao div {
  flex: 1;
  min-width: 0;
}

.barra-acao .caixa-rotulo {
  font-size: 9px;
}

.barra-acao strong {
  display: block;
  font: 300 21px/1.15 Roboto, system-ui, sans-serif;
  color: var(--dourado-texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.barra-acao .botao {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 12px 20px;
}

/* --------------------------------------------------------------- trilha */

/* o 404 não tem trilha: o mesmo respiro dela tira o rótulo de baixo do cabeçalho fixo */
.pagina-erro main > .container > .faixa:first-child {
  padding-top: 122px;
}

.trilha {
  /* o respiro embaixo separa a trilha do rótulo da página; sem ele os dois
     ficam colados e leem como uma linha só */
  padding: 104px 0 18px;
  font-size: 12.5px;
  color: var(--texto-suave);
}

.trilha ol {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.trilha a {
  position: relative;
}

/* mesmo truque da link-seta: 44px de altura no toque, 15px no desenho */
.trilha a::after {
  content: '';
  position: absolute;
  left: -8px;
  right: -8px;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

.trilha li + li::before {
  content: '/';
  margin-right: 7px;
  color: var(--dourado);
}

.trilha a {
  color: inherit;
  text-decoration: none;
}

.trilha a:hover {
  color: var(--marinho);
}

.titulo-pagina {
  margin: 22px 0 14px;
}

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

/*
 * O rodapé é o único bloco escuro grande que sobrou, e ele existe por um motivo
 * prático: o logo da marca é dourado, e dourado só brilha sobre escuro. O tom
 * puxa para o quente para não trazer o azul de volta, e ganha o filete da
 * textura dourada no topo.
 */
/*
 * O respiro antes do rodapé.
 *
 * Ele some quando a página termina num bloco que SANGRA de ponta a ponta (a
 * chamada larga da home, uma faixa escura): ali o respiro viraria uma tira
 * branca espremida entre duas cores, sem separar nada.
 *
 * Mas continua quando o último bloco é um cartão com cantos arredondados e
 * margem própria — o caso da chamada da listagem. Encostado, o arredondado
 * morre contra a linha reta do rodapé, e é isso que se lê como "colado".
 */
main:has(> .chamada-larga:last-child) + .rodape,
main:has(> .faixa-escura:last-child) + .rodape {
  margin-top: 0;
}

.rodape {
  position: relative;
  margin-top: var(--secao);
  padding: 60px var(--respiro) 0;
  background: #101625;
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
}

.rodape::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--textura-dourada);
}

.rodape-grade {
  display: grid;
  /* no celular as quatro listas andam em duas colunas: com o alvo de 44px em
     cada link, uma coluna só deixava o rodapé com mais de duas telas */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 20px;
  max-width: var(--largura);
  margin: 0 auto;
}

.rodape h2 {
  font: 500 10.5px/1.4 Roboto, system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dourado-suave);
  margin-bottom: 18px;
}

.rodape ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rodape li {
  margin: 0;
}

/* no celular cada link é uma faixa de 44px: é o que o dedo precisa. O
   espaçamento entre os itens sai daqui, não do margin do li */
.rodape ul a {
  display: block;
  padding: 13px 0;
  line-height: 1.2;
}

.rodape a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--curva);
}

.rodape a:hover {
  color: var(--dourado-claro);
}

/*
 * No rodapé vai a aplicação VERTICAL do manual. A horizontal, na largura que o
 * rodapé permite, deixaria "NEGÓCIOS IMOBILIÁRIOS" e o CRECI com 7px de altura,
 * ilegíveis. A vertical é mais alta e cabe com o texto lendo.
 *
 * ⚠️ Só peça do manual da marca. Houve um monograma "AB" aqui (07/09) que não
 * existe no manual, e o André reclamou em 15/09: "não temos ela nesse formato".
 *
 * `display: block` porque imagem é inline por padrão: como inline ela ganhava a
 * entrelinha do texto embaixo e ficava deslocada em relação ao resto da coluna.
 */
.rodape-logo {
  display: block;
  width: 208px;
  max-width: 100%;
  height: auto;
}

/* o título das colunas tem uma linha de 14,7px; o logo começa junto com ela */
.rodape-marca {
  grid-column: 1 / -1;
  padding-top: 2px;
}

.rodape-tagline {
  font: 300 22px/1.3 Roboto, system-ui, sans-serif;
  color: var(--branco);
  margin: 18px 0 22px;
  max-width: 20ch;
}

.rodape-contato {
  line-height: 2;
}

.rodape-contato a {
  display: block;
  padding: 7px 0;
  line-height: 30px;
}

/* com o link em bloco, a quebra depois dele viraria uma linha vazia */
.rodape-contato a + br {
  display: none;
}

.rodape-redes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 24px;
  font: 500 12px/1 Roboto, system-ui, sans-serif;
  letter-spacing: 0.015em;
}

.rodape-redes a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  /* alvo de 44px de altura para o dedo, sem inchar o espaço visual */
  padding: 13px 0;
  color: rgba(255, 255, 255, 0.82);
}

.rodape-redes svg {
  flex: 0 0 auto;
  color: var(--dourado-claro);
  transition: color 0.3s var(--curva);
}

.rodape-redes a:hover svg {
  color: #fff;
}

.rodape-legal {
  max-width: var(--largura);
  margin: 48px auto 0;
  padding: 24px 0;
  border-top: 1px solid var(--linha-escura);
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.5);
}

.rodape-legal a {
  position: relative;
}

/* o link no meio do texto legal ganha 44px de toque; a linha de cima e a de
   baixo são texto, então a faixa invisível não rouba toque de ninguém */
.rodape-legal a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

.rodape-legal p {
  margin: 0 0 6px;
  max-width: 78ch;
}

/*
 * Assinatura da casa: linha única, centralizada, mais apagada que o resto e
 * abaixo do texto legal do cliente. É crédito de autoria, não anúncio.
 */
.rodape-assinatura {
  /* embaixo, o lugar do WhatsApp flutuante (52px + 20px da borda): sem esse
     respiro ele pousava em cima do crédito no celular */
  padding: 16px 0 88px;
  border-top: 1px solid var(--linha-escura);
  text-align: center;
}

/* a ficha tem barra de ação fixa no celular: o crédito não pode ficar embaixo dela */
.pagina-ficha .rodape-assinatura {
  padding-bottom: 96px;
}

.rodape-assinatura p {
  margin: 0;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.4);
}

.rodape-assinatura a {
  position: relative;
  color: inherit;
}

.rodape-assinatura a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

.rodape-assinatura a:hover {
  color: var(--dourado);
}


/* ------------------------------------------------- capa de página interna */

/*
 * Meia altura, não a tela inteira: dá presença à página institucional sem
 * repetir o hero da home e sem empurrar o conteúdo para fora da primeira tela.
 */
.capa-pagina {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 56svh;
  padding: 130px 0 40px;
  overflow: hidden;
  color: #fff;
}

.capa-foto {
  position: absolute;
  inset: 0;
}

.capa-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: aproxima 1.6s var(--curva) both;
}

.capa-foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(28, 20, 8, 0.62) 0%, rgba(28, 20, 8, 0.12) 46%, rgba(24, 17, 6, 0.86) 100%),
    linear-gradient(90deg, rgba(24, 17, 6, 0.62) 0%, rgba(24, 17, 6, 0) 72%);
}

.capa-conteudo {
  position: relative;
  z-index: 1;
  width: 100%;
  text-shadow: 0 1px 22px rgba(6, 20, 38, 0.5);
}

.capa-conteudo h1 {
  max-width: 16ch;
  margin: 0;
  color: #fff;
}

/*
 * Capa sem foto: preto quente da marca, com os chevrons do símbolo em marca
 * d'água. O gradiente dourado no rodapé da faixa amarra com o resto do site.
 */
/*
 * A capa com foto precisa de altura para a imagem existir; a tipográfica, não.
 * Sem foto, os 56svh viravam um retângulo escuro vazio entre o cabeçalho e o
 * título — o vazio ficava maior que o próprio texto.
 */
.capa-marca {
  min-height: 0;
  padding-top: 132px;
  padding-bottom: 58px;
  background: #100c05;
}

.capa-textura {
  position: absolute;
  inset: 0;
  /* o símbolo oficial do manual (o mesmo do favicon) */
  background-image: url('/img/favicon.png');
  background-repeat: no-repeat;
  background-position: right -60px center;
  background-size: auto 150%;
  opacity: 0.07;
  pointer-events: none;
}

.capa-marca::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(193, 138, 46, 0) 0%,
    rgba(193, 138, 46, 0.55) 50%,
    rgba(193, 138, 46, 0) 100%
  );
}

.capa-registro {
  margin: 26px 0 0;
  font: 500 12.5px/1.9 Roboto, system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dourado-claro);
}

/* ---------------------------------------------------------------- equipe */

/*
 * O retrato do dono.
 *
 * A imobiliária leva o nome dele: no desktop o retrato ocupa uma coluna
 * inteira, com o texto ao lado atrás de um filete dourado — o mesmo filete que
 * marca as colunas da régua de números e a legenda do hero.
 */
.perfil {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-bottom: 82px;
}

.perfil-foto {
  margin: 0;
}

.perfil-foto img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 18%;
  border-radius: var(--raio-g);
  background: var(--gelo);
}

.perfil-corpo {
  align-self: center;
  padding-left: 26px;
  border-left: 1px solid var(--dourado);
}

.perfil-corpo h3 {
  margin: 6px 0 0;
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 300;
  letter-spacing: -0.01em;
}

.perfil-registro {
  margin: 10px 0 22px;
  font-size: 14px;
  color: var(--dourado-texto);
}

.perfil-corpo p {
  max-width: 36rem;
  color: var(--texto-suave);
}

.perfil-corpo .botao {
  margin-top: 14px;
}

/* cabeçalho de subseção: mesma linguagem do .faixa-cabecalho, sem o filete
   embaixo, para não cortar a seção em duas metades sem relação */
.faixa-cabecalho-solto {
  margin-bottom: 18px;
  padding-bottom: 0;
  border-bottom: 0;
}

.faixa-cabecalho-solto h3 {
  margin: 6px 0 0;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 300;
}

/*
 * Os corretores em retrato redondo, menores que o do dono: é o tamanho que
 * conta quem assina a casa. Fileira centralizada, não grade — com dois nomes,
 * uma grade de três colunas deixava um buraco que lia como "faltou alguém",
 * e centralizar resolve a fileira curta sem deixar vão de um lado só.
 */
/*
 * O texto de um lado, os retratos do outro. Empilhados, o bloco ficava com o
 * texto na metade esquerda e os círculos soltos no meio da tela, sem eixo
 * comum com nada da página.
 */
.equipe-bloco {
  margin-top: 8px;
}

.equipe-texto h3 {
  margin: 8px 0 0;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 300;
}

.equipe-texto p {
  margin: 18px 0 0;
  max-width: 42ch;
  color: var(--texto-suave);
}

.equipe {
  display: flex;
  flex-wrap: wrap;
  gap: 38px 46px;
  margin-top: 44px;
}

.pessoa {
  width: 190px;
  text-align: center;
}

.pessoa img {
  display: block;
  width: 150px;
  height: 150px;
  margin: 0 auto 16px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--gelo);
  /* filete dourado com um respiro branco: a mesma moldura do resto da página */
  box-shadow: 0 0 0 1px var(--branco), 0 0 0 2px rgba(193, 138, 46, 0.45);
}

.pessoa-corpo {
  padding-top: 0;
}

.pessoa-corpo h3 {
  margin: 0 0 5px;
  font-size: 19px;
  font-weight: 400;
}

.pessoa-cargo {
  margin: 0;
  font-size: 13.5px;
  color: var(--dourado-texto);
}

/* faixa de convite ao fim de uma seção */
.convite {
  display: grid;
  gap: 18px;
  margin-top: 58px;
  padding: 28px;
  border-radius: var(--raio);
  background: var(--creme);
}

.convite h3 {
  margin: 6px 0 0;
  font-size: 22px;
  font-weight: 400;
}

.convite p {
  margin: 8px 0 0;
  max-width: 40rem;
  font-size: 15px;
  color: var(--texto-suave);
}

/* -------------------------------------------------------- cartão lateral */

.cartao-lado {
  padding: 30px 28px;
  border-radius: var(--raio-g);
  background: var(--gelo);
  border-top: 2px solid var(--dourado);
}

.cartao-lado h3 {
  margin: 0 0 14px;
  font-size: 22px;
}

.cartao-lado p a {
  display: inline-block;
  padding: 13px 0;
  margin: -6px 0;
}

.cartao-lado p {
  font-size: 15.5px;
  color: var(--texto-suave);
}

/* ----------------------------------------------------------- texto legal */

.texto-legal {
  margin-top: 8px;
  padding-bottom: 20px;
}

.texto-legal h2 {
  font-size: 24px;
  margin-top: 44px;
}

.texto-legal p,
.texto-legal li {
  color: var(--texto-suave);
}

.texto-legal a {
  color: var(--marinho);
  text-decoration: underline;
  text-decoration-color: var(--dourado);
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------- blog */

.blog-posts {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.blog-posts li {
  border-top: 1px solid var(--linha);
}

.blog-posts li:last-child {
  border-bottom: 1px solid var(--linha);
}

/* a linha inteira é o link: alvo grande no dedo, um só link por post */
.texto-legal .blog-posts a {
  display: block;
  padding: 26px 0;
  color: inherit;
  text-decoration: none;
}

.blog-titulo {
  display: block;
  margin: 6px 0 8px;
  font: 400 21px/1.3 Roboto, system-ui, sans-serif;
  color: var(--marinho);
  transition: color 0.3s var(--curva);
}

.blog-posts a:hover .blog-titulo {
  color: var(--dourado-texto);
}

.blog-resumo {
  display: block;
  max-width: 60ch;
  color: var(--texto-suave);
}

.blog-data {
  font: 500 11px/1.4 Roboto, system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dourado-texto);
}

.blog-post h3 {
  margin-top: 32px;
  font-size: 19px;
}

.blog-post .marcadores li {
  margin-bottom: 8px;
  padding: 10px 0 10px 18px;
}

.blog-faq {
  margin: 0;
}

.blog-faq dt {
  margin-top: 26px;
  font-weight: 500;
  color: var(--texto);
}

.blog-faq dd {
  margin: 8px 0 0;
  max-width: 60ch;
  color: var(--texto-suave);
}

/* passos com mais respiro na página institucional */
.passos-largos li {
  padding-bottom: 26px;
  max-width: 62ch;
}

/*
 * Os quatro passos em linha, abaixo do cabeçalho da seção.
 *
 * Antes eles ficavam numa coluna ao lado do texto, e as duas colunas não
 * tinham como se alinhar: o título da esquerda tem 39px e o do passo 16,5px,
 * então as caixas começavam juntas mas as LINHAS DE BASE ficavam 15px
 * defasadas. Qualquer conserto ali seria um número mágico que quebraria na
 * próxima largura de tela, porque o título é fluido. Descendo para uma faixa
 * própria, os dois blocos nascem do mesmo filete e o alinhamento deixa de
 * depender de tipografia.
 */
.passos-grade {
  display: grid;
  gap: 8px 30px;
  margin-bottom: 0;
}

.passos-grade li {
  padding-left: 0;
  padding-top: 42px;
  max-width: 32ch;
}

.passos-grade li::before {
  top: 0;
  font-size: 24px;
}


/* ---------------------------------------------------------- acabamento */

/*
 * Foco visível de verdade. O padrão do navegador some em fundo escuro e é a
 * única pista de onde está quem navega por teclado — quem não usa mouse, e
 * também quem usa leitor de tela.
 */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--dourado);
  outline-offset: 3px;
  border-radius: 1px;
}

/* campo-isca do formulário: fora da tela para gente, visível para robô */
.isca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.pular {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 60;
  padding: 15px 20px;
  background: var(--dourado);
  color: var(--marinho-fundo);
  font: 500 14px/1 Roboto, system-ui, sans-serif;
  text-decoration: none;
  transition: top 0.25s var(--curva);
}

.pular:focus {
  top: 12px;
}

main:focus {
  outline: none;
}

::selection {
  background: var(--dourado);
  color: #fff;
}

/* o número fica alinhado em coluna, como em tabela de preço */
.card-preco,
.caixa-valor,
.ficha-numeros dd,
.lista-numeros strong,
.hero-numeros strong {
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------- busca do hero */

/*
 * Barra única, não um formulário. A versão anterior era um bloco creme com três
 * caixas brancas e um botão de largura inteira: parecia painel de sistema
 * pousado em cima da foto. Aqui os campos dividem uma só barra de vidro
 * escuro, separados por filete, com o botão compacto na ponta — e a foto
 * continua aparecendo por trás.
 */
.busca {
  display: grid;
  gap: 0;
  margin-top: 32px;
  border-radius: var(--raio);
  background: rgba(12, 8, 3, 0.55);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(220, 181, 106, 0.38);
  text-shadow: none;
  animation: aparece 1s var(--curva) both 0.85s;
}

/*
 * Sem `overflow: hidden` aqui: ele arredondava a barra de graça, mas cortava a
 * lista do seletor, que precisa escapar para fora. Os cantos passam a ser
 * arredondados nas próprias pontas — o último campo é o botão.
 */
.busca .campo:first-child {
  border-radius: var(--raio) var(--raio) 0 0;
}

.busca .botao {
  min-height: 56px;
  border: 0;
  border-radius: 0 0 var(--raio) var(--raio);
}


/* ------------------------------------------------------ campo de seleção */

/*
 * O seletor da casa, no lugar do nativo. Fechado, ele imita a leitura do campo
 * anterior (rótulo em cima, valor embaixo, seta à direita); aberto, a lista
 * segue a identidade do site em vez do desenho do sistema operacional.
 */
.campo {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.campo-rotulo {
  font: 500 9.5px/1.4 Roboto, system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.campo-botao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 4px 0 2px;
  background: none;
  border: 0;
  color: #fff;
  font: 400 16px/1.5 Roboto, system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}

.campo-valor {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.campo-seta {
  flex: 0 0 auto;
  color: var(--dourado-claro);
  transition: transform 0.3s var(--curva);
}

.campo-botao[aria-expanded='true'] .campo-seta {
  transform: rotate(180deg);
}

.campo-botao:focus-visible {
  outline: 2px solid var(--dourado-claro);
  outline-offset: 3px;
}

.filtros .campo-botao:focus-visible {
  outline-color: var(--dourado);
  outline-offset: 1px;
}

.campo-lista {
  position: absolute;
  z-index: 60;
  margin: 0;
  padding: 6px;
  list-style: none;
  /* a altura vem do JS, pelo espaço que sobrar na janela. Uma lista de 18
     bairros sem teto vira cortina sobre a página inteira. A barra some: o
     conteúdo rola, mas nada de canaleta cinza do sistema no meio do dourado */
  overflow-y: auto;
  scrollbar-width: none;
  background: rgba(14, 10, 4, 0.97);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(220, 181, 106, 0.34);
  border-radius: var(--raio);
  box-shadow: 0 26px 54px -20px rgba(0, 0, 0, 0.7);
}

.campo-lista::-webkit-scrollbar {
  display: none;
}

.campo-lista li {
  padding: 11px 14px;
  border-radius: var(--raio-p);
  color: rgba(255, 255, 255, 0.86);
  font: 400 15.5px/1.3 Roboto, system-ui, sans-serif;
  cursor: pointer;
}

.campo-lista li.focada {
  background: rgba(220, 181, 106, 0.16);
  color: #fff;
}

.campo-lista li.escolhida {
  color: var(--dourado-claro);
}

.campo-lista li.escolhida::after {
  content: '';
  float: right;
  width: 13px;
  height: 7px;
  margin-top: 6px;
  border-left: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg);
}


/* ------------------------------------------------------ busca na lista */

.filtros-busca {
  grid-column: 1 / -1;
}

.filtros input[type='search'] {
  width: 100%;
  min-height: 48px;
  padding: 12px;
  background: var(--papel);
  color: var(--texto);
  font: 400 15px/1.2 Roboto, system-ui, sans-serif;
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
}

/*
 * Nos filtros o mesmo seletor aparece sobre fundo claro: aqui ele é uma caixa
 * branca com borda, e a lista vira papel em vez de vidro escuro.
 */
.filtros .campo {
  gap: 8px;
  padding: 0;
  border: 0;
}

.filtros .campo-rotulo {
  font: 500 10.5px/1.4 Roboto, system-ui, sans-serif;
  letter-spacing: 0.015em;
  text-transform: none;
  color: var(--texto-suave);
}

.filtros .campo-botao {
  min-height: 48px;
  padding: 12px;
  background: var(--branco);
  color: var(--texto);
  font: 400 15px/1.2 Roboto, system-ui, sans-serif;
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
}

.filtros .campo-botao[aria-expanded='true'] {
  border-color: var(--dourado);
}

.filtros .campo-seta {
  color: var(--dourado-texto);
}

.campo-lista-clara {
  background: var(--branco);
  backdrop-filter: none;
  border-color: var(--linha);
  box-shadow: 0 20px 44px -18px rgba(22, 32, 44, 0.28);
}

.campo-lista-clara li {
  color: var(--texto);
}

.campo-lista-clara li.focada {
  background: var(--gelo);
}

.campo-lista-clara li.escolhida {
  color: var(--dourado-texto);
}


/* --------------------------------------------------------------- vídeos */

/*
 * A fila de vídeos do canal. O canal do André é feito de Shorts, então o cartão
 * é vertical: capa em 9:16, título embaixo. São doze, o que não cabe em grade
 * nenhuma sem virar uma parede — por isso rola de lado, como a seleção.
 */
.videos {
  margin-top: 38px;
}

.videos .video {
  flex: 0 0 62%;
  scroll-snap-align: start;
}

.video-capa {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  background: var(--gelo);
  border: 0;
  border-radius: var(--raio);
  cursor: pointer;
}

.video-capa img {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  transition: transform 1s var(--curva);
}

.video-capa:hover img {
  transform: scale(1.04);
}

/* o véu de baixo existe para o botão de play não sumir numa capa clara */
.video-capa::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 6, 2, 0) 55%, rgba(8, 6, 2, 0.5) 100%);
}

.video-play {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  transform: translate(-50%, -50%);
  color: var(--marinho-fundo);
  background: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
  transition: background 0.35s var(--curva), transform 0.45s var(--curva);
}

/* o triângulo é óptico: centrado pela caixa, ele parece torto para a esquerda */
.video-play svg {
  margin-left: 3px;
}

.video-capa:hover .video-play {
  background: #fff;
  transform: translate(-50%, -50%) scale(1.06);
}

.video-titulo {
  /* duas linhas e para: os títulos do canal variam de 4 a 100 caracteres, e sem
     teto a fila fica com cartões de alturas diferentes e base irregular */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 14px 0 0;
  font: 400 15px/1.45 Roboto, system-ui, sans-serif;
  color: var(--texto);
}

/* quando o player entra, ele ocupa o lugar exato da capa */
.video-quadro {
  width: 100%;
  aspect-ratio: 9 / 16;
  border: 0;
  border-radius: var(--raio);
  background: #000;
}

/* ------------------------------------------------------ prateleira (home) */

/*
 * A seleção da casa em prateleira, não em grade.
 *
 * Seis cartões iguais em duas linhas fazem o olho ler TABELA: percorrer linha
 * por linha comparando campos. Numa seleção curada a foto é o argumento, e a
 * fila horizontal diz outra coisa — "escolhemos estes, passe o olho". A
 * comparação campo a campo continua existindo na listagem, que é onde ela é o
 * que a pessoa quer fazer.
 *
 * A prateleira vaza para fora do container de propósito: o cartão cortado na
 * borda é o que avisa que a fila continua. Sem isso ninguém rola.
 */
.prateleira {
  display: flex;
  gap: 18px;
  margin: 0 calc(var(--respiro) * -1);
  padding: 4px var(--respiro) 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* sem isto o snap encosta o cartão na borda do scroller e ignora o respiro:
     a fila nasce com 40px já rolados e a seta "anterior" nunca começa apagada */
  scroll-padding-inline: var(--respiro);
  /* a barra cinza do sistema no meio do creme quebra o acabamento */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.prateleira::-webkit-scrollbar {
  display: none;
}

.prateleira .card {
  flex: 0 0 78%;
  scroll-snap-align: start;
}

/*
 * As setas ficam nas laterais da própria fila, não no cabeçalho da seção: quem
 * está olhando o quarto cartão não precisa levar o olho de volta ao topo para
 * achar o botão. Só onde há ponteiro — no celular a fila rola com o dedo.
 */
.prateleira-caixa {
  position: relative;
}

.prateleira-seta {
  display: none;
  position: absolute;
  z-index: 5;
  /* a altura acompanha a CAPA, não o cartão inteiro: com o título embaixo, o
     meio do cartão cai abaixo do meio da imagem */
  top: 42%;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  color: var(--marinho-fundo);
  border: 1px solid rgba(193, 138, 46, 0.35);
  border-radius: 50%;
  box-shadow: 0 12px 30px -12px rgba(11, 38, 71, 0.55);
  cursor: pointer;
  transition: background 0.3s var(--curva), opacity 0.35s var(--curva),
    transform 0.35s var(--curva);
}

/*
 * Fora da fila, não em cima dela. O quanto sai depende do respiro que a tela
 * oferece: numa janela larga o container deixa mais de 140px de sobra de cada
 * lado, e a seta cabe inteira ali; em telas menores ela encosta na borda do
 * conteúdo, senão sairia da janela.
 */
.prateleira-seta-ant {
  left: -30px;
}

.prateleira-seta-prox {
  right: -30px;
}

.prateleira-seta:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.06);
}

/* ponta da fila: a seta apaga e sai do caminho do clique */
.prateleira-seta[disabled] {
  opacity: 0;
  pointer-events: none;
}

.cabecalho-acoes {
  display: flex;
  align-items: center;
  gap: 22px;
}

/* =================================================================
   Tela grande. Tudo o que muda o layout do desktop vive daqui para
   baixo, dentro de media query — nunca solto no fim do arquivo.
   ================================================================= */

@media (min-width: 700px) {
  :root {
    --respiro: 40px;
    --secao: 104px;
  }

  .hero h1 {
    font-size: clamp(40px, 4.4vw, 62px);
  }

  .busca {
    grid-template-columns: 1fr 1fr 0.8fr auto;
    align-items: stretch;
    max-width: 46rem;
  }

  .busca .campo {
    padding: 14px 20px;
    border-bottom: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.14);
  }

  .busca .campo:first-child {
    border-radius: var(--raio) 0 0 var(--raio);
  }

  .busca .botao {
    padding: 0 34px;
    border-radius: 0 var(--raio) var(--raio) 0;
  }

  .regua {
    grid-template-columns: repeat(4, 1fr);
  }



  .grade {
    grid-template-columns: repeat(2, 1fr);
  }

  .videos .video {
    flex: 0 0 calc((100% - 5 * 18px) / 6);
  }

  .passos-grade {
    grid-template-columns: repeat(4, 1fr);
  }

  .lista-numeros-linha {
    grid-template-columns: repeat(4, 1fr);
  }

  /*
   * A mesma grade do resto da página, com o rótulo como item próprio na
   * primeira linha: assim o título e as provas nascem juntos na segunda, em
   * vez de a coluna da direita subir até a altura da etiqueta.
   */
  .chamada-dois {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
    /* o respiro entre rótulo e conteúdo vem da GRADE, não de margem nos filhos:
       margem num lado só empurrava o título 14px abaixo das provas */
    gap: 14px 30px;
  }

  .chamada-dois > .rotulo {
    grid-column: 1 / span 2;
    grid-row: 1;
  }

  .chamada-corpo {
    grid-column: 1 / span 2;
    grid-row: 2;
  }

  .chamada-dois .chamada-provas {
    grid-column: 3 / span 2;
    grid-row: 2;
    margin-top: 0;
  }

  /* o h2 da chamada tem margem própria; dentro da grade quem manda é ela */
  .chamada-corpo h2 {
    margin-top: 0;
  }

  .filtros {
    grid-template-columns: repeat(3, 1fr);
    padding: 26px;
  }



  .filtros-busca {
    grid-column: span 3;
  }

  .filtros .campo:last-of-type {
    grid-column: auto;
  }

  .dois {
    grid-template-columns: 1.35fr 1fr;
    gap: 64px;
    align-items: start;
  }

  .ficha-numeros {
    grid-template-columns: repeat(5, 1fr);
  }

  .ficha-numeros div:last-child:nth-child(odd) {
    grid-column: auto;
  }

  .caracteristicas {
    grid-template-columns: repeat(3, 1fr);
  }

  .comodidades {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px 30px;
  }

  .galeria {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: repeat(2, 1fr);
  }

  .galeria-principal {
    grid-row: span 2;
  }

  .galeria-principal img {
    aspect-ratio: auto;
    height: 100%;
    min-height: 400px;
  }

  .galeria-secundaria {
    display: block;
    overflow: hidden;
    background: var(--gelo);
  }

  .galeria-secundaria img {
    width: 100%;
    height: 100%;
    min-height: 196px;
    object-fit: cover;
    transition: transform 1s var(--curva);
  }

  .galeria-secundaria:hover img {
    transform: scale(1.05);
  }

  .rodape-grade {
    grid-template-columns: repeat(2, 1fr);
  }

  .rodape-marca {
    grid-column: auto;
  }

  .rodape li {
    margin-bottom: 11px;
  }

  .rodape ul a,
  .rodape-contato a {
    display: inline;
    padding: 0;
    line-height: inherit;
  }

  .rodape-contato a + br {
    display: inline;
  }

  .rodape-assinatura {
    padding-bottom: 24px;
  }

  .capa-pagina {
    min-height: 62svh;
    padding: 170px 0 56px;
  }

  /* a capa tipográfica não precisa de altura de foto: sem imagem, os 62svh
     viravam um retângulo escuro vazio maior que o próprio título */
  .capa-marca {
    min-height: 0;
    padding: 150px 0 66px;
  }

  .chamada {
    padding: 72px 64px;
  }

  .chamada-larga {
    padding-left: max(64px, calc(50vw - var(--largura) / 2 + 64px));
    padding-right: max(64px, calc(50vw - var(--largura) / 2 + 64px));
  }

  .barra-acao {
    display: none;
  }

  /* sem a barra de ação, o flutuante volta a ser o caminho para o WhatsApp */
  .pagina-ficha .zap {
    display: flex;
  }

  .ficha-texto p {
    font-size: 17.5px;
    line-height: 1.65;
  }

  .pagina-ficha .rodape-assinatura {
    padding-bottom: 24px;
  }
}

@media (min-width: 1040px) {
  .menu-botao {
    display: none;
  }

  .menu {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 30px;
    padding: 0;
    background: none;
    transform: none;
    visibility: visible;
  }

  .menu ul {
    display: flex;
    gap: 30px;
    margin: 0;
  }

  .menu a {
    position: relative;
    min-height: 0;
    padding: 4px 0;
    font: 400 14.5px/1 Roboto, system-ui, sans-serif;
    letter-spacing: 0.02em;
    border: 0;
  }

  .menu a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 1px;
    background: var(--dourado);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s var(--curva);
  }

  .menu a:hover::after,
  .menu a[aria-current='page']::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  .menu ul {
    align-items: center;
  }

  .tem-painel {
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .painel-botao {
    display: flex;
  }

  .painel {
    position: absolute;
    top: calc(100% + 18px);
    left: -26px;
    z-index: 50;
    width: 430px;
    background: rgba(14, 10, 4, 0.97);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(220, 181, 106, 0.34);
    border-radius: var(--raio);
    box-shadow: 0 26px 54px -20px rgba(0, 0, 0, 0.7);
  }

  /* a faixa invisível cobre o vão entre o item e o painel: sem ela o painel
     fecha no meio do caminho do ponteiro */
  .tem-painel::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -26px;
    width: 430px;
    height: 20px;
  }

  .menu .botao-topo {
    margin-left: 6px;
    padding: 11px 22px;
  }

  .menu .botao-topo::after {
    display: block;
  }

  .rodape-grade {
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  }

  .convite {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 32px;
    padding: 32px 36px;
  }

  /* mesma grade de quatro colunas do resto da página: texto em 1-2, retratos
     em 3-4 */
  .equipe-bloco {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
    gap: 30px;
  }

  .equipe-texto {
    grid-column: 1 / span 2;
  }

  .equipe {
    grid-column: 3 / span 2;
    gap: 30px 46px;
    margin-top: 0;
  }

  .pessoa {
    width: 230px;
  }

  .pessoa img {
    width: 196px;
    height: 196px;
    margin-bottom: 20px;
  }

  .pessoa-corpo h3 {
    font-size: 22px;
  }

  .pessoa-cargo {
    font-size: 14.5px;
  }

  .perfil {
    grid-template-columns: 0.82fr 1.18fr;
    gap: 58px;
    margin-bottom: 96px;
  }

  .faixa-cabecalho-solto {
    margin-bottom: 22px;
  }

  /*
   * A MESMA grade de quatro colunas dos passos que vêm abaixo.
   *
   * Com flex em 44%/40% o texto da direita começava em x=900 e a terceira
   * coluna dos passos em x=790: dois eixos verticais quase iguais, que é
   * exatamente o que o olho lê como torto. Em grid, o título ocupa as colunas
   * 1-2 e o texto as 3-4, então tudo na seção nasce das mesmas quatro linhas.
   *
   * Alinhado pelo TOPO, não pela base: é o que faz a primeira linha dos dois
   * lados começar na mesma altura.
   */
  .faixa-cabecalho-largo {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
    gap: 0 30px;
  }

  /*
   * O rótulo é item PRÓPRIO da grade, na primeira linha, e não um irmão dentro
   * de uma caixa. É isso que faz o texto da direita começar na altura do
   * TÍTULO e não na do rótulo — antes ele subia junto com a etiqueta pequena,
   * e a escrita dos dois lados não se encontrava em lugar nenhum.
   */
  .faixa-cabecalho-largo > .rotulo {
    grid-column: 1 / span 2;
    grid-row: 1;
  }

  .faixa-cabecalho-largo > h1,
  .faixa-cabecalho-largo > h2 {
    grid-column: 1 / span 2;
    grid-row: 2;
    margin-top: 12px;
  }

  .faixa-cabecalho-largo > .cabecalho-lado {
    grid-column: 3 / span 2;
    grid-row: 2;
    margin-top: 12px;
  }

  /*
   * Alinhado à ESQUERDA, não à direita.
   *
   * Com `text-align: right` cada linha do parágrafo começava num ponto
   * diferente (a borda irregular fica do lado de onde se lê), e o bloco inteiro
   * parecia torto ao lado de um título que tem margem esquerda reta. Agora cada
   * coluna tem seu próprio eixo vertical: a da esquerda no respiro da página, a
   * da direita no começo da sua coluna.
   */


  .marca img {
    width: 300px;
  }

  .rolou .marca img {
    width: 252px;
  }

  .hero h1 {
    max-width: 13ch;
  }

  /*
   * A largura do texto do hero é limitada pelo próprio h1 e pelo parágrafo, não
   * por uma porcentagem do container. A regra `max-width: 64%` que morava aqui
   * era do hero antigo e sobreviveu à reescrita, encolhendo o container de
   * 1280 para 1085 e desalinhando o texto de todo o resto do site.
   */

  /* o indicador de rolagem só faz sentido onde há hero de tela cheia */
  .rolar {
    position: absolute;
    right: max(var(--respiro), calc(50vw - var(--largura) / 2 + var(--respiro)));
    bottom: 48px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    font: 400 12px/1 Roboto, system-ui, sans-serif;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    animation: aparece 1s var(--curva) both 1.2s;
  }

  .rolar::after {
    content: '';
    width: 64px;
    height: 1px;
    background: rgba(255, 255, 255, 0.5);
    transform-origin: left;
    animation: risca 2.6s var(--curva) infinite;
  }

  @keyframes risca {
    0%,
    100% {
      transform: scaleX(0.2);
    }
    50% {
      transform: scaleX(1);
    }
  }

  .trilhos {
    gap: 30px;
  }

  .trilho-sep {
    gap: 26px;
  }

  .trilho {
    min-height: 460px;
    padding: 72px 0;
  }


  .prateleira .card {
    flex: 0 0 calc((100% - 2 * 18px) / 3);
  }

  .prateleira-seta {
    display: flex;
  }

  @media (min-width: 1440px) {
    .prateleira-seta-ant {
      left: -56px;
    }

    .prateleira-seta-prox {
      right: -56px;
    }
  }

  .grade {
    grid-template-columns: repeat(3, 1fr);
    gap: 52px 30px;
  }

  .ficha {
    grid-template-columns: 1.65fr 1fr;
    gap: 72px;
    align-items: start;
  }

  .ficha-lado {
    position: sticky;
    top: 108px;
  }

  /* a lista de bairros ganha a foto que acende no hover */
  .bairro-conta {
    text-align: right;
  }

  .bairros {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
  }

  .bairro-fotos {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    order: 2;
    overflow: hidden;
    border-radius: var(--raio-g);
    border: 1px solid rgba(220, 181, 106, 0.22);
    box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.8);
  }

  .bairro-foto {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.7s var(--curva);
  }

  .bairro-foto.ativa {
    opacity: 1;
  }

  .bairro-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .bairro-lista {
    order: 1;
  }

  .vidro {
    padding: 40px 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .linha-mascara > span {
    transform: none;
  }
}