/* Agência de Negócios — sala de entrada em teste (23/09/2026).
   O que as três versões dividem: topo, "quem está por trás", rodapé, a
   camada do quarto e o conteúdo de cada quarto. Cada versão tem o seu
   arquivo (planta.css, divisao.css, mesa.css). Exige brand/tokens.css,
   brand/movimento.css e brand/componentes.css, nessa ordem. Cor, fonte e
   raio vêm dos tokens. Como na landing, a primeira tela tem régua de
   movimento própria (liberada pelo Mike em 22/09/2026): a cena pode passar
   de 500 ms. O resto segue a régua do design system. Valores próprios ficam
   em :root, com o motivo ao lado. */

:root {
  --lateral: 16px;                         /* respiro da tela no celular */
  --largura: 1180px;
  --raio-balao: 24px 24px 24px 6px;        /* o balão da marca em escala de cartão: canto de baixo à esquerda quase reto */
  --raio-eu: 16px 16px 4px 16px;           /* a fala da pessoa: o mesmo balão, espelhado */
  --mov-cena: cubic-bezier(.2, .8, .2, 1); /* chega rápido e assenta devagar, sem passar do ponto */
  --mov-troca: cubic-bezier(.4, 0, .2, 1); /* o que atravessa a tela e volta */
  --topo-h: 92px;                          /* medido pelo JS */
  --aureo: .618;                           /* a divina proporção: toda divisão da versão 3, e o maior cômodo da planta */
}
@media (min-width: 768px) { :root { --lateral: 32px; } }
@media (min-width: 1024px) { :root { --lateral: 48px; } }
@media (min-width: 1600px) { :root { --largura: 1360px; } } /* monitor grande: a prancha e as colunas crescem junto */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: hidden; -webkit-tap-highlight-color: transparent; }
img, svg { max-width: 100%; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a { touch-action: manipulation; }
/* Segurar o dedo num botão não pode selecionar o texto dele. */
button, .an-botao, .opcao-sala, .opcao-tela, .botao-claro { -webkit-user-select: none; user-select: none; }

.dentro { width: 100%; max-width: var(--largura); margin: 0 auto; padding-inline: var(--lateral); }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Uma versão de cada vez. As outras existem no arquivo, para comparar; as
   variações (variacoes/) montam a sua sala e escondem as três. */
:root:not([data-versao="planta"]) .so-planta, :root:not([data-versao="divisao"]) .so-divisao,
:root:not([data-versao="mesa"]) .so-mesa { display: none !important; }

.rotulo {
  font: 600 .8125rem/1.2 var(--fonte-mono); letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase; color: var(--cor-tinta-media);
}

/* ---- topo ------------------------------------------------------------------
   A marca, o seletor de rascunho e, logo abaixo, o Ricardo pequeno: nome,
   ofício e CRECI. Ele está na página, só não é a primeira coisa. Fica acima
   de tudo o que a versão mexe: a marca fica, o conteúdo cruza por baixo. */
.topo { position: relative; z-index: 5; background: var(--cor-superficie-papel); }
.topo__dentro { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; }
.topo__marca { display: block; padding: 7px 0; border-radius: var(--raio-xs); }
.topo__marca .an-marca { display: block; height: 30px; width: auto; }
[data-versao="divisao"] .topo { background: var(--cor-cobalto-superficie); color: var(--cor-sobre-cobalto); }
[data-versao="divisao"] .topo .an-marca {
  --marca-balao: var(--marca-cobalto-balao); --marca-balao-contorno: none;
  --marca-monograma: var(--marca-cobalto-monograma); --marca-texto: var(--marca-cobalto-texto);
}
[data-versao="divisao"] .topo__marca:focus-visible { outline-color: var(--cor-sobre-cobalto); }

/* ---- quem assina: a resposta ao "isso é de verdade?" ------------------------
   Nome, registro de corretor, CNPJ, cidade e "atendo de longe" na primeira
   tela, em letra de ler (15 px ou mais), na língua de cada versão: o carimbo
   na planta (planta.css), o cartão de visita na mesa (mesa.css) e, na
   divisão, o papel timbrado aqui: a primeira divisão da tela, uma linha fina
   separando a marca de quem responde por ela. */
.assinatura { position: relative; padding-top: 9px; padding-bottom: 12px; color: var(--cor-sobre-cobalto-apoio); }
.assinatura__linha-fina {
  position: absolute; left: var(--lateral); right: var(--lateral); top: 0; height: 1px; transform-origin: 0 50%;
  background: color-mix(in srgb, var(--cor-sobre-cobalto) 34%, transparent);
}
.assinatura p { margin: 0; font: 400 .9375rem/1.35 var(--fonte-texto); }
.assinatura__quem { color: var(--cor-sobre-cobalto); }
.assinatura__quem strong { font: 700 1.0625rem/1.2 var(--fonte-display); letter-spacing: -0.02em; }
.assinatura__num { font-variant-numeric: tabular-nums; }
.assinatura__num span { white-space: nowrap; }
/* Dentro das divisões a assinatura recolhe (divisao.js); volta na sala. */
.assinatura--recolhida { height: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; visibility: hidden; opacity: 0; }
/* Com a letra grande para a tela, as mesmas cinco coisas (nome, ofício, CRECI,
   CNPJ, cidade e "de longe") em menos palavras: quatro linhas em vez de seis,
   para as portas e o "Falar direto" caberem embaixo dela. */
@media (max-width: 20em) {
  .assinatura { padding-top: 7px; padding-bottom: 9px; }
  .assinatura p { line-height: 1.28; }
  .assinatura__longo { display: none; }
}

/* Marca de rascunho, com a troca de versão. Discreta: não é parte do desenho.
   O botão diz em qual versão a pessoa está; a lista (nove versões, 24/09/2026)
   desce dele, com a ideia de cada uma em uma linha. */
html:not([data-rascunho]) .rascunho[data-rascunho] { display: none; }
.rascunho { position: relative; font: 600 .8125rem/1 var(--fonte-mono); color: var(--cor-tinta-media); }
.rascunho__botao {
  position: relative; display: flex; align-items: center; gap: 6px; min-height: 36px; margin: 0; padding: 2px 8px 2px 12px;
  border: 1px solid var(--cor-borda-hairline); border-radius: var(--raio-pilula); background: transparent; cursor: pointer; font: inherit; color: inherit;
  transition: background-color var(--dur-toque) var(--mov-toque), transform var(--dur-toque) var(--mov-entrada);
}
.rascunho__botao::before { content: ""; position: absolute; inset: -5px -2px; } /* alvo de toque de 44 */
.rascunho__botao:active { transform: scale(.96); transition-duration: var(--dur-toque-saida); }
.rascunho__atual {
  display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: var(--raio-pilula);
  background: var(--cor-tinta-forte); color: var(--cor-superficie-papel);
}
.rascunho__seta { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--dur-curta) var(--mov-entrada); }
.rascunho__botao[aria-expanded="true"] .rascunho__seta { transform: rotate(180deg); }
.rascunho__lista {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 80; width: min(348px, calc(100vw - 2 * var(--lateral)));
  max-height: calc(100dvh - var(--topo-h) - 16px); overflow-y: auto; overscroll-behavior: contain;
  padding: 6px; border-radius: var(--raio-md); background: var(--cor-superficie-elevada); color: var(--cor-tinta-forte);
  box-shadow: inset 0 0 0 1px var(--cor-borda-hairline), var(--sombra-3); transform-origin: calc(100% - 30px) 0;
}
.rascunho__titulo { margin: 8px 10px 6px; font: 600 .8125rem/1.2 var(--fonte-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cor-tinta-media); }
.rascunho__item {
  display: flex; gap: 10px; align-items: flex-start; padding: 7px 8px; border-radius: var(--raio-sm);
  color: inherit; text-decoration: none; transition: background-color var(--dur-toque) var(--mov-toque);
}
.rascunho__item--familia { margin-top: 4px; box-shadow: 0 -1px 0 var(--cor-borda-hairline); border-radius: 0 0 var(--raio-sm) var(--raio-sm); padding-top: 10px; }
@media (hover: hover) { .rascunho__item:hover { background: var(--cor-cobalto-veu); } }
.rascunho__item:active { background: var(--cor-cobalto-veu); }
.rascunho__id {
  flex: none; display: grid; place-items: center; min-width: 34px; height: 28px; border-radius: var(--raio-pilula);
  border: 1px solid var(--cor-borda-hairline); font: 600 .8125rem/1 var(--fonte-mono); color: var(--cor-tinta-media);
}
.rascunho__item[aria-current="true"] .rascunho__id { background: var(--cor-tinta-forte); border-color: var(--cor-tinta-forte); color: var(--cor-superficie-papel); }
.rascunho__texto { font: 400 .9375rem/1.3 var(--fonte-texto); color: var(--cor-tinta-media); }
.rascunho__texto strong { font: 700 .9375rem/1.3 var(--fonte-display); letter-spacing: -0.01em; color: var(--cor-tinta-forte); }
.rascunho__texto strong::after { content: " · "; font-weight: 400; color: var(--cor-tinta-media); }
[data-versao="divisao"] .rascunho__botao { border-color: color-mix(in srgb, var(--cor-sobre-cobalto) 30%, transparent); color: var(--cor-sobre-cobalto-apoio); }
[data-versao="divisao"] .rascunho__atual { background: var(--cor-sobre-cobalto); color: var(--cor-cobalto-superficie); }

.pular {
  position: fixed; top: 0; left: 50%; z-index: 90; transform: translate(-50%, -110%);
  background: var(--cor-cobalto-superficie); color: var(--cor-sobre-cobalto);
  font: 700 1rem/1 var(--fonte-display); text-decoration: none;
  padding: 14px 22px; border-radius: 0 0 var(--raio-md) var(--raio-md);
  transition: transform var(--dur-curta-saida) var(--mov-saida);
}
.pular:focus-visible { transform: translate(-50%, 0); transition: transform var(--dur-curta) var(--mov-entrada);
  outline: 2px solid var(--cor-sobre-cobalto); outline-offset: -6px; }


/* =========================================================================
   QUANTO CUSTA
   A conta é um papel de orçamento, da família da nota da landing: de onde vem
   cada custo, linha por linha, sem número (o número vem depois de olhar o caso).
   ========================================================================= */
.custo { display: flex; flex-direction: column; gap: 14px; padding-top: 56px; }
.custo__titulo { margin: 0; font: 700 1.875rem/1.08 var(--fonte-display); letter-spacing: -0.032em; max-width: 20ch; text-wrap: balance; }
.custo__texto { margin: 0; font: var(--texto-corpo); color: var(--cor-tinta-media); max-width: 52ch; }
.custo__texto strong { font-weight: 600; color: var(--cor-tinta-forte); }
.conta { width: 100%; max-width: 560px; margin: 6px 0 4px; }
.conta__papel {
  display: flex; flex-direction: column; padding: 6px 18px 14px; border-radius: var(--raio-md);
  background: var(--cor-superficie-elevada); box-shadow: inset 0 0 0 1px var(--cor-borda-hairline), var(--sombra-1);
}
.conta__linha { display: flex; flex-direction: column; gap: 3px; padding: 12px 0; border-bottom: 1.5px dashed var(--cor-borda-vazia); }
.conta__o-que { font: 700 1.125rem/1.25 var(--fonte-display); letter-spacing: -0.02em; }
.conta__como { font: 400 1rem/1.5 var(--fonte-texto); color: var(--cor-tinta-media); }
.conta__rodape { margin: 0; padding-top: 12px; font: 600 .9375rem/1.4 var(--fonte-texto); color: var(--cor-tinta-forte); }
@media (min-width: 720px) {
  .conta__linha { flex-direction: row; gap: 18px; align-items: baseline; }
  .conta__o-que { flex: 0 0 150px; }
}

/* =========================================================================
   QUEM ESTÁ POR TRÁS
   Menos currículo, mais prova: de onde é, como atende de longe, com quem trabalha.
   ========================================================================= */
.quem { display: flex; flex-direction: column; gap: 14px; padding-top: 64px; padding-bottom: 72px; }
.quem__titulo { margin: 0; font: 700 1.875rem/1.08 var(--fonte-display); letter-spacing: -0.032em; max-width: 18ch; text-wrap: balance; }
.quem__grade { display: grid; gap: 22px; margin-top: 6px; }
@media (min-width: 820px) { .quem__grade { grid-template-columns: 300px 1fr; gap: 48px; align-items: start; } }
.quem__foto { position: relative; margin: 0; width: min(100%, 300px); aspect-ratio: 4 / 5; border-radius: var(--raio-balao); overflow: hidden; background: var(--cor-cobalto-veu); }
.quem__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.quem__texto > p { margin: 0 0 18px; font: var(--texto-corpo); color: var(--cor-tinta-media); max-width: 52ch; }
.provas { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 14px; max-width: 56ch; }
/* Cada prova com o balão da marca como marcador: é a fala do Ricardo. */
.prova { position: relative; display: flex; flex-direction: column; gap: 2px; padding-left: 24px; font: var(--texto-corpo); color: var(--cor-tinta-media); }
.prova::before { content: ""; position: absolute; left: 0; top: .42em; width: 12px; height: 10px; border-radius: 5px 5px 5px 1.5px; background: var(--cor-cobalto-superficie); }
.prova__titulo { font: 700 1.125rem/1.3 var(--fonte-display); letter-spacing: -0.02em; color: var(--cor-tinta-forte); }
.ficha { margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--cor-borda-hairline); }
/* O rótulo ao lado; se o conteúdo não couber ao lado (tela estreita ou letra
   aumentada no celular), desce para baixo do rótulo. Em grade, o número do
   CNPJ, que não quebra, alargava a página inteira abaixo de 317 px. */
.ficha__linha { display: flex; flex-wrap: wrap; column-gap: 12px; row-gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--cor-borda-hairline); }
.ficha dt { flex: 0 0 96px; }
.ficha dd { flex: 1 1 13rem; min-width: 0; }
.ficha dt { font: 600 .8125rem/1.6 var(--fonte-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cor-tinta-media); }
.ficha dd { margin: 0; font: 400 .9375rem/1.5 var(--fonte-texto); color: var(--cor-tinta-forte); }
.ficha__num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ficha__zap { color: var(--cor-cobalto); text-decoration: underline; text-underline-offset: 3px; border-radius: var(--raio-xs); }

/* revelação ao rolar: sobe 16 px e assenta, uma vez */
.js-movimento [data-revelar] { opacity: 0; transform: translateY(16px); transition: opacity 520ms var(--mov-entrada), transform 700ms var(--mov-cena); }
.js-movimento [data-revelar].visivel { opacity: 1; transform: none; }

.rodape { padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
.rodape__apoio { color: var(--cor-rodape-apoio); }
.rodape__privacidade { color: var(--cor-rodape-link); text-underline-offset: 3px; }

/* =========================================================================
   O QUARTO (versões 2 e 4)
   Uma camada fixa. A base está aqui; o jeito de entrar e o alto do quarto
   são de cada versão (.quarto--planta, .quarto--mesa).
   ========================================================================= */
.quarto { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.quarto__palco {
  position: absolute; inset: 0; overflow: hidden; pointer-events: auto;
  transform-origin: 0 0; background: var(--cor-superficie-papel);
}
.quarto--fechando .quarto__palco { pointer-events: none; }
.quarto__rolagem { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.quarto__heroi {
  position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(64px + env(safe-area-inset-top)) var(--lateral) 22px;
}
.quarto__coisa { position: relative; }
.quarto__coisa:empty { display: none; }
.quarto__heroi-sub { margin: 4px 0 0; font: 400 .9375rem/1.35 var(--fonte-texto); color: var(--cor-tinta-media); }
.quarto__heroi-sub:empty { display: none; }
.quarto__veu { position: absolute; inset: 0; background: color-mix(in srgb, var(--cor-rodape-fundo) 42%, transparent); opacity: 0; pointer-events: none; }
.quarto__titulo {
  margin: 0; font: 700 2rem/1.04 var(--fonte-display); letter-spacing: -0.035em; max-width: 13ch;
  text-wrap: balance; outline: none;
}
.quarto__folha { position: relative; background: var(--cor-superficie-papel); padding: 26px var(--lateral) calc(56px + env(safe-area-inset-bottom)); }
.quarto__corpo { width: 100%; max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 1024px) { .quarto__heroi > * { width: 100%; max-width: 680px; margin-inline: auto; } }

.quarto__fechar {
  position: absolute; z-index: 5; top: calc(10px + env(safe-area-inset-top)); right: 10px;
  display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  color: var(--cor-tinta-forte); background: color-mix(in srgb, var(--cor-superficie-elevada) 70%, transparent);
  box-shadow: inset 0 0 0 1px var(--cor-borda-hairline);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  transition: transform var(--dur-toque) var(--mov-entrada), background-color var(--dur-toque) var(--mov-toque);
}
.quarto__fechar .an-icone { width: 20px; height: 20px; stroke-width: 2; }
.quarto__fechar:active { transform: scale(.9); transition-duration: var(--dur-toque-saida); }

/* O conteúdo do quarto entra em escada, depois de a camada tomar forma. */
@keyframes sobe { from { opacity: 0; transform: translateY(12px); } }
.quarto--entrando .anima-sobe { animation: sobe 380ms var(--mov-entrada) both; animation-delay: calc(var(--atraso-base, 240ms) + min(var(--k, 0), 7) * 45ms); }

/* ---- o que tem dentro dos quartos ---------------------------------------- */
.quarto__pergunta { margin: 0; font: 700 1.375rem/1.2 var(--fonte-display); letter-spacing: var(--tracking-subtitulo); }
.quarto__apoio { margin: 0; font: var(--texto-corpo); color: var(--cor-tinta-media); max-width: 58ch; }
.quarto__texto { margin: 0; font: var(--texto-corpo); color: var(--cor-tinta-forte); max-width: 58ch; }
.quarto__nota { margin: 0; font: 400 .9375rem/1.45 var(--fonte-texto); color: var(--cor-tinta-media); }
/* De onde a pessoa veio, quando um quarto leva a outro: rótulo técnico, como a cota. */
.quarto__trilha { margin: 0; font: 400 .9375rem/1.3 var(--fonte-texto); color: var(--cor-tinta-media); }
.quarto__trilha-de { margin-right: 6px; font: 600 .8125rem/1 var(--fonte-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cor-cobalto); }
/* O rodapé de CRECI em letra de ler: é ele que responde "é corretor de verdade?". */
.quarto__creci { margin: 6px 0 0; font: 400 .9375rem/1.45 var(--fonte-texto); font-variant-numeric: tabular-nums; color: var(--cor-tinta-media); text-wrap: balance; }
/* "Quanto custa?" dentro do quarto: separado do resto por um picote, como a nota. */
.quarto__custo { margin: 4px 0 0; padding-top: 14px; border-top: 1.5px dashed var(--cor-borda-vazia); font: var(--texto-apoio); color: var(--cor-tinta-media); max-width: 58ch; }
.quarto__custo strong { font-weight: 600; color: var(--cor-tinta-forte); }
.quarto__chamada { margin: 4px 0 0; font: var(--texto-corpo); font-weight: 600; color: var(--cor-tinta-forte); max-width: 58ch; }
.quarto__acao { align-self: flex-start; width: 100%; max-width: 420px; }
.quarto__aviso { margin: 0; font: 400 .9375rem/1.5 var(--fonte-texto); color: var(--cor-tinta-media); }
.selo-rascunho {
  display: inline-block; margin-right: 6px; padding: 3px 8px; border-radius: var(--raio-pilula); vertical-align: 1px;
  background: var(--cor-coral-veu); color: var(--cor-problema-rotulo); font: 600 .8125rem/1.2 var(--fonte-mono);
}

.opcoes-sala { display: grid; grid-template-columns: 1fr; gap: 8px; }
.opcoes-sala--tres { grid-template-columns: repeat(3, 1fr); }
.opcao-sala {
  position: relative; display: flex; align-items: center; min-height: 56px; margin: 0; padding: 12px 16px;
  text-align: left; text-decoration: none; cursor: pointer;
  font: 600 1rem/1.25 var(--fonte-texto); color: var(--cor-cobalto);
  background: var(--cor-superficie-elevada); border: 1.5px solid var(--cor-cobalto); border-radius: var(--raio-eu);
  transition: background-color var(--dur-toque) var(--mov-toque), color var(--dur-toque) var(--mov-toque),
              border-color var(--dur-toque) var(--mov-toque), transform var(--dur-toque) var(--mov-entrada);
}
.opcoes-sala--tres .opcao-sala { justify-content: center; text-align: center; padding: 10px 6px; }
@media (hover: hover) { .opcao-sala:hover { background: var(--cor-cobalto-veu); } }
.opcao-sala:active { transform: scale(.97); transition-duration: var(--dur-toque-saida); transition-timing-function: var(--mov-saida); }
.opcao-sala[aria-pressed="true"] { background: var(--cor-cobalto-superficie); color: var(--cor-sobre-cobalto); border-color: var(--cor-cobalto-superficie); }

.imoveis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .imoveis { grid-template-columns: 1fr 1fr; } }
.imovel { background: var(--cor-superficie-elevada); border-radius: var(--raio-md); overflow: hidden; box-shadow: inset 0 0 0 1px var(--cor-borda-hairline); }
/* Cada imóvel abre a página dele no catálogo, na língua desta sala (24/09/2026). */
.imovel__link { display: block; color: inherit; text-decoration: none; transition: transform var(--dur-toque) var(--mov-entrada); }
.imovel__link:active { transform: scale(.98); transition-duration: var(--dur-toque-saida); }
.imovel__link:focus-visible { outline-offset: -3px; }
.imovel__foto { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: var(--cor-cobalto-veu); }
.imovel__info { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px 16px; }
/* A medida desenhada como cota de planta: linha, dois traços inclinados e o número no meio. */
.imovel__cota {
  position: relative; display: flex; justify-content: center; height: 22px; margin: 0 0 6px;
  font: 400 .8125rem/22px var(--fonte-mono); color: var(--cor-tinta-media);
}
.imovel__cota::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; border-top: 1px solid currentColor; opacity: .7; }
.imovel__cota::after {
  content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 12px;
  background: linear-gradient(45deg, transparent 45%, currentColor 45% 55%, transparent 55%) left / 12px 12px no-repeat,
              linear-gradient(45deg, transparent 45%, currentColor 45% 55%, transparent 55%) right / 12px 12px no-repeat;
  opacity: .7;
}
.imovel__cota span { position: relative; z-index: 1; padding: 0 8px; background: var(--cor-superficie-elevada); }
.imovel__tipo { font: 400 .9375rem/1.3 var(--fonte-texto); color: var(--cor-tinta-media); }
.imovel__lugar { font: 700 1.125rem/1.25 var(--fonte-display); letter-spacing: -0.02em; }
.imovel__papel { display: flex; gap: 8px; align-items: baseline; margin-top: 6px; font: 400 .9375rem/1.4 var(--fonte-texto); color: var(--cor-tinta-forte); }
.ponto { flex: none; width: 10px; height: 10px; border-radius: 50%; transform: translateY(1px); }
.ponto--ok { background: var(--cor-resolvido); }
.ponto--andamento { background: var(--cor-pendente); }
.imovel__preco { margin-top: 6px; font: 700 1.125rem/1 var(--fonte-display); }
.imovel__exemplo { margin-left: 6px; font: 600 .8125rem/1 var(--fonte-mono); color: var(--cor-tinta-media); text-transform: uppercase; letter-spacing: .06em; }

.vender__resposta { display: flex; flex-direction: column; gap: 12px; }
.vender__resposta:empty { display: none; }
.vender__conteudo { display: flex; flex-direction: column; gap: 12px; }
.vender__fala {
  margin: 0; padding: 14px 16px; max-width: 44ch; align-self: flex-start;
  font: var(--texto-corpo); color: var(--cor-caminho-texto); background: var(--cor-caminho-fundo);
  border-radius: var(--raio-fala);
}

/* =========================================================================
   TELA DEITADA (o computador, 24/09/2026)
   A mesma regra de sala.js (`S.largo`): 1024 px ou mais, e mais larga que
   alta. Cada versão tem a sua composição (planta.css, divisao.css, as
   variações); aqui fica o que é comum: o quarto vira um painel à direita, da
   largura de ler, e o desenho da versão fica à vista do lado, onde a câmera
   para. Clicar fora do painel volta para a sala (o cursor avisa).
   ========================================================================= */
:root { --painel-w: clamp(400px, 40vw, 560px); }
@media (min-width: 1024px) and (min-aspect-ratio: 5/4) {
  .quarto.quarto--largo .quarto__palco { cursor: zoom-out; }
  .quarto.quarto--largo .quarto__veu { pointer-events: auto; cursor: zoom-out; }
  .quarto.quarto--largo .quarto__rolagem { left: auto; width: var(--painel-w); cursor: auto; }
  .quarto.quarto--largo .quarto__folha { min-height: 100%; padding: 30px 34px 48px; border-radius: 24px 0 0 0; box-shadow: var(--sombra-3); }
  .quarto--largo .quarto__corpo { max-width: none; }
  .quarto.quarto--largo .quarto__fechar { top: 14px; right: 14px; }
  .quarto.quarto--largo.quarto--simples .quarto__rolagem { background: var(--cor-superficie-papel); box-shadow: var(--sombra-3); }
  .quarto.quarto--largo.quarto--simples .quarto__folha { box-shadow: none; border-radius: 0; min-height: 0; }
  /* No painel, cada imóvel de exemplo é uma linha: a foto à esquerda, o que é à direita. */
  .quarto--largo .imoveis { grid-template-columns: 1fr; gap: 10px; }
  .quarto--largo .imovel__link { display: grid; grid-template-columns: 40% minmax(0, 1fr); }
  .quarto--largo .imovel__foto { height: 100%; aspect-ratio: auto; min-height: 132px; }
  .quarto--largo .imovel__info { padding: 10px 14px 12px; }
  @media (hover: hover) {
    .imovel__link { transition: transform var(--dur-toque) var(--mov-entrada), background-color var(--dur-toque) var(--mov-toque); }
    .imovel__link:hover { background: var(--cor-cobalto-veu); }
  }

  /* Quanto custa: o texto de um lado, a conta do outro, como a nota ao lado do orçamento. */
  .custo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: 56px; row-gap: 14px; align-items: start; padding-top: 72px; }
  .custo > .rotulo, .custo__titulo, .custo > .custo__texto { grid-column: 1; }
  .custo .conta { grid-column: 2; grid-row: 1 / span 4; max-width: none; margin: 0; }
  .custo__titulo { font-size: 2.25rem; }
  .quem { padding-top: 88px; }
  .quem__titulo { font-size: 2.25rem; }
}

/* =========================================================================
   MOVIMENTO REDUZIDO (o que é comum). Deslocamento e escala vão a zero; a
   opacidade fica, curta. Nunca 0 ms: o design system troca toda duração
   por 120 ms.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  @keyframes sobe { from { opacity: 0; } }
  [data-revelar] { transform: none !important; }
  /* A marca põe 120 ms em toda transição; a camada do quarto é posicionada pelo
     JS (o topo do palco abaixo da marca, a altura da coisa na mesa) e, sem isto,
     deslizava de 0 a 60 px na abertura, e a medida lia o meio do caminho (na
     mesa, o quarto do papel ficava 46 px mais alto que a tela). Como na divisão:
     nada disso desliza; a troca é por opacidade, que é do JS. */
  .quarto, .quarto__palco, .quarto__veu, .quarto__rolagem, .quarto__heroi, .quarto__coisa, .quarto__folha { transition-property: none !important; }
}