/* Agência de Negócios — catálogo em teste (24/09/2026).
   O que as três línguas dividem: topo, seletor de rascunho, a ficha simples
   (sem JavaScript), o raio-x do papel, a galeria de fotos, a visita a um
   cômodo (planta e maquete), os botões do WhatsApp e o rodapé. Cada língua
   tem o seu arquivo (planta.css, maquete.css, divisao.css). Exige brand/
   tokens.css, movimento.css e componentes.css. Cor, fonte e raio vêm dos
   tokens; o que é derivado vem por color-mix, com o motivo ao lado. A régua
   de movimento é a da sala: a cena pode passar de 500 ms (liberado pelo Mike
   em 22/09/2026); o resto segue o design system. */

:root {
  --lateral: 16px;
  --largura: 1180px;
  --coluna: 620px;                          /* a página do imóvel: uma coluna de ler, no meio, também no computador */
  --raio-balao: 24px 24px 24px 6px;
  --mov-cena: cubic-bezier(.2, .8, .2, 1);
  --mov-troca: cubic-bezier(.4, 0, .2, 1);
  --topo-h: 60px;                           /* medido pelo JS */
  --aureo: .618;
  /* A tinta da planta é o cobalto de texto (lê sobre o papel nos dois temas). */
  --tinta-planta: var(--cor-cobalto);
  /* O piso de fora (quintal, garagem): o papel um tom abaixo, para o de dentro saltar. */
  --piso-fora: color-mix(in srgb, var(--cor-borda-hairline) 55%, var(--cor-superficie-papel));
  /* O fundo da galeria é sempre escuro, nos dois temas, como o rodapé. */
  --galeria-fundo: var(--cor-rodape-fundo);
}
@media (min-width: 768px) { :root { --lateral: 32px; } }
@media (min-width: 1024px) { :root { --lateral: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: hidden; -webkit-tap-highlight-color: transparent; background: var(--cor-superficie-papel); color: var(--cor-tinta-forte); font: var(--texto-corpo); }
img { max-width: 100%; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a { touch-action: manipulation; color: inherit; }
button, .an-botao { -webkit-user-select: none; user-select: none; }
.dentro { width: 100%; max-width: var(--largura); margin: 0 auto; padding-inline: var(--lateral); }
.coluna { width: 100%; max-width: calc(var(--coluna) + 2 * var(--lateral)); margin: 0 auto; padding-inline: var(--lateral); }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rotulo { font: 600 .8125rem/1.2 var(--fonte-mono); letter-spacing: var(--tracking-rotulo); text-transform: uppercase; color: var(--cor-tinta-media); }
.travado { overflow: hidden; }

/* ---- topo: a marca (que leva à sala) e o seletor de rascunho --------------- */
.topo { position: relative; z-index: 30; 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); }

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; }
.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)));
  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; }

/* ---- a ficha simples: o que aparece sem JavaScript --------------------------
   Com o JavaScript, cada língua monta a sua página no palco e a ficha sai. */
.js-cat .estatico { display: none; }
.estatico { display: flex; flex-direction: column; gap: 14px; padding-top: 12px; padding-bottom: 48px; max-width: calc(var(--coluna) + 2 * var(--lateral)); }
.ficha-titulo { margin: 0; font: 700 1.75rem/1.1 var(--fonte-display); letter-spacing: -0.03em; text-wrap: balance; }
.ficha-apoio, .ficha-resumo { margin: 0; color: var(--cor-tinta-media); }
.ficha-preco { margin: 0; font: 700 1.5rem/1 var(--fonte-display); }
.ficha-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.ficha-cartao__link { display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
.ficha-cartao__link img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--raio-md); }
.ficha-cartao__cod { font: 600 .8125rem/1.3 var(--fonte-mono); color: var(--cor-tinta-media); }
.ficha-cartao__manchete { font: 700 1.125rem/1.25 var(--fonte-display); }
.ficha-cartao__resumo, .ficha-cartao__papel { font: var(--texto-apoio); color: var(--cor-tinta-media); }
.ficha-cartao__preco { font: 700 1.125rem/1.2 var(--fonte-display); }
.ficha-capa { margin: 0; }
.ficha-capa img { width: 100%; height: auto; border-radius: var(--raio-md); }
.ficha-capa figcaption { font: 400 .8125rem/1.4 var(--fonte-mono); color: var(--cor-tinta-media); }
.ficha-fatos { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; }
.ficha-fatos dt { font: 600 .8125rem/1.3 var(--fonte-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--cor-tinta-media); }
.ficha-fatos dd { margin: 0; font: 700 1.125rem/1.3 var(--fonte-display); }
.ficha-sub { margin: 8px 0 0; font: 700 1.25rem/1.2 var(--fonte-display); letter-spacing: -0.02em; }
.ficha-onde { margin: 0; color: var(--cor-tinta-media); }
.ficha-perto { margin: 0; padding-left: 1.2em; font: var(--texto-apoio); color: var(--cor-tinta-media); }
.ficha-perto li span + span::before { content: " · "; }
.ficha-voltar { align-self: flex-start; font: 600 .9375rem/1 var(--fonte-texto); color: var(--cor-cobalto); }
.ficha-acao { width: 100%; max-width: 420px; }
.ficha-custo, .custo-linha { margin: 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; }
.ficha-custo strong, .custo-linha strong { font-weight: 600; color: var(--cor-tinta-forte); }
.creci { margin: 0; font: 400 .9375rem/1.45 var(--fonte-texto); font-variant-numeric: tabular-nums; color: var(--cor-tinta-media); text-wrap: balance; }
.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);
}
.selo-exemplo {
  display: inline-flex; align-items: center; padding: 3px 8px; border-radius: var(--raio-pilula);
  background: var(--cor-coral-veu); color: var(--cor-problema-rotulo); font: 600 .8125rem/1.2 var(--fonte-mono); letter-spacing: .02em;
}

/* ---- o raio-x do papel ---------------------------------------------------------
   Um laudo em português: no alto a resposta para quem vai financiar; embaixo
   cada item com o seu estado, na cor semântica da marca e com forma própria
   (tique, relógio, traço), para não depender só da cor. */
.rx { display: flex; flex-direction: column; gap: 14px; }
.rx__titulo { margin: 0; font: 700 1.5rem/1.15 var(--fonte-display); letter-spacing: -0.03em; }
.rx__sub { margin: -8px 0 0; font: var(--texto-apoio); color: var(--cor-tinta-media); }
.rx__resposta {
  --rx-cor: var(--cor-resolvido); --rx-fundo: var(--cor-resultado-fundo); --rx-tinta: var(--cor-resultado-texto);
  display: grid; grid-template-columns: 1fr; gap: 2px; padding: 14px 16px 16px; border-radius: var(--raio-md);
  background: var(--rx-fundo); color: var(--rx-tinta);
}
.rx__resposta.rx--acerto { --rx-cor: var(--cor-pendente); --rx-fundo: color-mix(in srgb, var(--cor-pendente) 12%, var(--cor-superficie-papel)); /* o véu do pendente: o design system dá o do resolvido e o do problema, não o deste */ --rx-tinta: var(--cor-tinta-forte); }
.rx__resposta.rx--falta { --rx-cor: var(--cor-travado); --rx-fundo: var(--cor-problema-fundo); --rx-tinta: var(--cor-problema-texto); }
.rx__pergunta { margin: 0; font: 600 .8125rem/1.3 var(--fonte-mono); letter-spacing: .08em; text-transform: uppercase; }
.rx__sim { display: flex; align-items: center; gap: 10px; margin: 2px 0 4px; font: 700 2rem/1 var(--fonte-display); letter-spacing: -0.035em; color: var(--cor-tinta-forte); }
.rx__ponto { width: 14px; height: 14px; border-radius: 50%; background: var(--rx-cor); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rx-cor) 22%, transparent); }
.rx__explica { margin: 0; font: var(--texto-apoio); max-width: 52ch; }
.rx__itens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--cor-borda-hairline); }
.rx__item {
  --rx-cor: var(--cor-resolvido);
  display: grid; grid-template-columns: 28px 1fr auto; column-gap: 10px; row-gap: 2px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--cor-borda-hairline);
}
.rx__item.rx--acerto, .rx__etapa.rx--acerto { --rx-cor: var(--cor-pendente); }
.rx__item.rx--falta, .rx__etapa.rx--falta { --rx-cor: var(--cor-travado); }
.rx__marca { grid-row: 1 / span 2; align-self: start; display: grid; place-items: center; width: 26px; height: 26px; margin-top: -2px; border-radius: 50%; background: color-mix(in srgb, var(--rx-cor) 14%, transparent); color: var(--rx-cor); }
.rx__marca svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rx__nome { font: 700 1.0625rem/1.3 var(--fonte-display); letter-spacing: -0.015em; }
.rx__estado { font: 600 .8125rem/1.2 var(--fonte-mono); letter-spacing: .04em; color: var(--rx-cor); white-space: nowrap; }
.rx__texto { grid-column: 2 / -1; font: var(--texto-apoio); color: var(--cor-tinta-media); }
.rx__etapas { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--raio-md); background: var(--cor-superficie-elevada); box-shadow: inset 0 0 0 1px var(--cor-borda-hairline); }
.rx__etapas-titulo { margin: 0; font: 700 1.125rem/1.25 var(--fonte-display); letter-spacing: -0.02em; }
.rx__lista-etapas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
/* As etapas ligadas por um fio, como passos: o fio segue a cor de quem já passou. */
.rx__etapa {
  --rx-cor: var(--cor-resolvido);
  position: relative; display: grid; grid-template-columns: 28px 1fr auto; column-gap: 10px; row-gap: 2px; padding: 0 0 14px;
}
.rx__etapa::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 2px; width: 2px; background: var(--cor-borda-hairline); }
.rx__etapa:last-child::before { display: none; }
.rx__etapa.rx--ok::before { background: var(--cor-resolvido); }
.rx__passo-num { grid-row: 1 / span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: 700 .875rem/1 var(--fonte-display); color: var(--cor-sobre-semantico); background: var(--rx-cor); }
.rx__etapa.rx--falta .rx__passo-num { background: var(--cor-superficie-elevada); color: var(--cor-tinta-media); box-shadow: inset 0 0 0 1.5px var(--cor-borda-vazia); }
.rx__etapa.rx--falta .rx__estado { color: var(--cor-tinta-media); }
.rx__passo { font: 600 1rem/1.35 var(--fonte-texto); padding-top: 3px; }
.rx__quem { grid-column: 2 / -1; font: var(--texto-apoio); color: var(--cor-tinta-media); }
.rx__etapa .rx__estado { padding-top: 6px; }
.rx__prazo { margin: 0; font: var(--texto-apoio); color: var(--cor-tinta-media); }
.rx__nota { margin: 0; font: 400 .8125rem/1.4 var(--fonte-mono); color: var(--cor-tinta-media); }
/* O raio-x chega item a item quando aparece na tela: a marca se desenha. */
.js-cat .rx--espera .rx__item, .js-cat .rx--espera .rx__etapa { opacity: 0; transform: translateY(8px); }
.rx--visto .rx__item, .rx--visto .rx__etapa { animation: rx-chega 420ms var(--mov-entrada) both; animation-delay: calc(80ms + min(var(--i, 0), 7) * 70ms); }
.rx--visto .rx__marca path { stroke-dasharray: 1; animation: rx-traco 420ms var(--mov-percurso) both; animation-delay: calc(240ms + min(var(--i, 0), 7) * 70ms); }
@keyframes rx-chega { from { opacity: 0; transform: translateY(8px); } }
@keyframes rx-traco { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ---- a pílula do papel: a resposta curta, no alto da página e na lista ----- */
.papel-pilula {
  --rx-cor: var(--cor-resolvido);
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px 6px 10px; border-radius: var(--raio-pilula);
  background: var(--cor-superficie-elevada); box-shadow: inset 0 0 0 1px var(--cor-borda-hairline);
  font: 400 .9375rem/1.2 var(--fonte-texto); color: var(--cor-tinta-media); text-decoration: none;
}
.papel-pilula.rx--acerto { --rx-cor: var(--cor-pendente); }
.papel-pilula.rx--falta { --rx-cor: var(--cor-travado); }
.papel-pilula strong { font: 700 .9375rem/1.2 var(--fonte-display); color: var(--cor-tinta-forte); }
.papel-pilula::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--rx-cor); }
a.papel-pilula { transition: transform var(--dur-toque) var(--mov-entrada), background-color var(--dur-toque) var(--mov-toque); }
a.papel-pilula:active { transform: scale(.97); transition-duration: var(--dur-toque-saida); }
@media (hover: hover) { a.papel-pilula:hover { background: var(--cor-cobalto-veu); } }

/* ---- o desenho da planta (a planta e a maquete usam; base.js desenha) -------
   A mesma mão da sala 2: tinta cobalto no papel, parede cheia, porta com o
   arco, janela com o vidro. O azul-claro no chão é onde a pessoa está. */
.pl { display: block; width: 100%; height: 100%; overflow: hidden; }
.pl__paredes { fill: var(--tinta-planta); }
.pl__piso { fill: var(--cor-superficie-papel); transition: fill var(--dur-media) var(--mov-toque); }
.pl__piso.pl--aqui { fill: var(--cor-cobalto-veu); }
.pl__fora { fill: var(--piso-fora); stroke: var(--tinta-planta); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 3; stroke-opacity: .55; transition: fill var(--dur-media) var(--mov-toque); }
.pl__fora.pl--aqui { fill: var(--cor-cobalto-veu); }
.pl__divisa { fill: none; stroke: var(--tinta-planta); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 10 3 2 3; stroke-opacity: .7; }
.pl__divisa--terreno { stroke-width: 1.6; stroke-opacity: 1; }
.pl__janela { fill: none; stroke: var(--tinta-planta); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pl__arco { fill: none; stroke: var(--tinta-planta); stroke-width: .8; vector-effect: non-scaling-stroke; stroke-dasharray: 2 2.5; stroke-opacity: .6; }
.pl__folha { fill: none; stroke: var(--tinta-planta); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.pl__degraus { fill: none; stroke: var(--tinta-planta); stroke-width: .8; vector-effect: non-scaling-stroke; stroke-opacity: .8; }
.pl__sobe { fill: none; stroke: var(--cor-coral); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.pl__ponta-seta { fill: none; stroke: var(--cor-coral); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pl__terreno { fill: var(--piso-fora); }
.pl__zona { fill: transparent; stroke: var(--tinta-planta); stroke-width: .8; vector-effect: non-scaling-stroke; stroke-dasharray: 3 3; stroke-opacity: .6; transition: fill var(--dur-media) var(--mov-toque); }
.pl__zona--agua { fill: var(--cor-cobalto-veu); stroke-dasharray: none; }
.pl__zona.pl--aqui { fill: color-mix(in srgb, var(--cor-cobalto-veu) 80%, transparent); }
.pl__copas { fill: none; stroke: var(--cor-resolvido); stroke-width: .8; vector-effect: non-scaling-stroke; stroke-opacity: .75; }
.pl__capim { fill: none; stroke: var(--cor-resolvido); stroke-width: .7; vector-effect: non-scaling-stroke; stroke-opacity: .5; }
.pl__ondas { fill: none; stroke: var(--tinta-planta); stroke-width: .8; vector-effect: non-scaling-stroke; stroke-opacity: .7; }
.pl__telhado { fill: var(--cor-superficie-papel); stroke: var(--tinta-planta); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.pl__porteira { fill: none; stroke: var(--tinta-planta); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.pl__grao { fill: none; stroke: var(--cor-pendente); stroke-width: .8; vector-effect: non-scaling-stroke; stroke-opacity: .45; }
.pl__rua { fill: var(--cor-borda-hairline); }
.pl__rua-meio { stroke: var(--cor-superficie-papel); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 8 6; }
.pl__marcos { stroke: var(--cor-coral); stroke-width: 1.4; vector-effect: non-scaling-stroke; }

/* ---- os botões do fim da página do imóvel ----------------------------------- */
.acoes { display: flex; flex-direction: column; gap: 10px; }
.acoes .an-botao { width: 100%; max-width: 420px; min-height: 56px; font-size: 1.0625rem; }
.acoes__nota { margin: 0; font: var(--texto-apoio); color: var(--cor-tinta-media); }

/* ---- a tira de fotos (abre a galeria) ------------------------------------------ */
.tira { display: flex; gap: 8px; margin: 0; padding: 2px var(--lateral) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--lateral); scrollbar-width: none; overscroll-behavior-x: contain; }
.tira::-webkit-scrollbar { display: none; }
.tira__item { flex: none; scroll-snap-align: start; display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; border-radius: var(--raio-sm); }
.tira__item img { display: block; width: 132px; height: 96px; object-fit: cover; border-radius: var(--raio-sm); background: var(--cor-cobalto-veu); transition: transform var(--dur-toque) var(--mov-entrada); }
.tira__item:active img { transform: scale(.96); transition-duration: var(--dur-toque-saida); }
.tira__nome { font: 400 .9375rem/1.2 var(--fonte-texto); color: var(--cor-tinta-media); }
.tira-cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tira-cabeca h2 { margin: 0; font: 700 1.25rem/1.2 var(--fonte-display); letter-spacing: -0.02em; }
.tira-cabeca span { font: 400 .8125rem/1.2 var(--fonte-mono); color: var(--cor-tinta-media); }

/* ---- a galeria: as fotos em tela cheia ------------------------------------------
   Abre da foto tocada (a foto cresce do lugar dela), passa de lado, fecha pelo
   X, pelo Esc, pelo voltar do celular ou puxando a foto para baixo; fecha de
   volta para o lugar de onde veio. */
.galeria { position: fixed; inset: 0; z-index: 70; color: var(--cor-rodape-creci); touch-action: pan-x; }
.galeria__fundo { position: absolute; inset: 0; background: var(--galeria-fundo); }
.galeria__faixa { position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.galeria__faixa::-webkit-scrollbar { display: none; }
/* ampliada: os gestos são da foto (passear, pinçar), e a faixa não corre */
.galeria--perto { touch-action: none; }
.galeria--perto .galeria__faixa { overflow-x: hidden; }
.galeria--perto .galeria__quadro img { cursor: grab; }
.galeria__quadro { position: relative; flex: 0 0 100%; height: 100%; margin: 0; scroll-snap-align: center; scroll-snap-stop: always; }
.galeria__quadro img { position: absolute; display: block; max-width: none; transform-origin: 0 0; background: color-mix(in srgb, var(--cor-rodape-creci) 8%, transparent); }
/* a cópia que voa da miniatura até a foto inteira (e de volta): só transform (catalogo.js, vooMoldura) */
.voo-moldura { position: fixed; margin: 0; overflow: hidden; transform-origin: 0 0; pointer-events: none; }
.voo-moldura img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; }
.galeria__topo {
  position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 10px 10px var(--lateral);
  background: linear-gradient(color-mix(in srgb, var(--galeria-fundo) 70%, transparent), transparent);
}
.galeria__conta { font: 600 .8125rem/1 var(--fonte-mono); letter-spacing: .06em; color: var(--cor-rodape-apoio); }
.galeria__nome { flex: 1; font: 700 1.125rem/1.2 var(--fonte-display); letter-spacing: -0.02em; color: var(--cor-rodape-creci); }
.galeria__rodape {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 12px;
  padding: 16px var(--lateral) calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, color-mix(in srgb, var(--galeria-fundo) 70%, transparent));
  font: 400 .8125rem/1.3 var(--fonte-mono); color: var(--cor-rodape-apoio);
}
.galeria__setas { display: none; gap: 8px; }
@media (hover: hover) and (pointer: fine) { .galeria__setas { display: flex; } }
.botao-redondo {
  display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; cursor: pointer; flex: none;
  color: var(--cor-tinta-forte); background: color-mix(in srgb, var(--cor-superficie-elevada) 72%, 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), opacity var(--dur-curta) var(--mov-toque);
}
.botao-redondo .an-icone { width: 20px; height: 20px; stroke-width: 2; }
.botao-redondo:active { transform: scale(.9); transition-duration: var(--dur-toque-saida); }
.botao-redondo:disabled { opacity: .35; cursor: default; }
.galeria .botao-redondo { color: var(--cor-rodape-creci); background: color-mix(in srgb, var(--cor-rodape-creci) 14%, transparent); box-shadow: none; }

/* ---- a visita a um cômodo (planta e maquete) --------------------------------------
   Uma camada por cima da página. No alto, a câmera (o desenho, chegando perto do
   cômodo); embaixo, a foto dele, que nasce do lugar do cômodo; no pé, o nome e
   o caminho para o cômodo do lado. */
.visita { position: fixed; inset: 0; z-index: 60; overflow: hidden; }
.visita__fundo { position: absolute; inset: 0; background: var(--cor-superficie-papel); }
.visita__camera { position: absolute; inset: 0; pointer-events: none; }
.visita__foto {
  position: absolute; margin: 0; overflow: hidden; border-radius: var(--raio-md); cursor: zoom-in;
  background: var(--cor-cobalto-veu); transform-origin: 0 0; box-shadow: var(--sombra-2); touch-action: pan-y;
}
.visita__miolo { position: absolute; inset: 0; transform-origin: 50% 50%; } /* desfaz a deformação da moldura no voo (catalogo.js, vooMoldura) */
.visita__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.visita__foto-nota { position: absolute; left: 8px; bottom: 8px; padding: 4px 8px; border-radius: var(--raio-pilula); background: color-mix(in srgb, var(--cor-rodape-fundo) 62%, transparent); color: var(--cor-rodape-creci); font: 400 .8125rem/1 var(--fonte-mono); }
.visita__sem-foto { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; text-align: center; font: var(--texto-apoio); color: var(--cor-caminho-texto); }
.visita__barra {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px;
  padding: 12px var(--lateral) calc(14px + env(safe-area-inset-bottom));
  max-width: calc(var(--coluna) + 2 * var(--lateral)); margin: 0 auto;
}
.visita__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.visita__onde { margin: 0; font: 600 .8125rem/1.2 var(--fonte-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--cor-tinta-media); }
.visita__nome { margin: 0; font: 700 1.5rem/1.1 var(--fonte-display); letter-spacing: -0.03em; outline: none; }
.visita__area { font: 400 1rem/1 var(--fonte-mono); letter-spacing: 0; color: var(--cor-tinta-media); white-space: nowrap; }
.visita__fechar { position: absolute; z-index: 3; top: calc(8px + env(safe-area-inset-top)); right: 10px; }
.visita__dica { margin: 0; font: var(--texto-apoio); color: var(--cor-tinta-media); }

/* ---- o fim da página do imóvel: o próximo e a volta à lista ----------------- */
.outros { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.outros a {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--raio-md); text-decoration: none;
  background: var(--cor-superficie-elevada); box-shadow: inset 0 0 0 1px var(--cor-borda-hairline);
  transition: transform var(--dur-toque) var(--mov-entrada), background-color var(--dur-toque) var(--mov-toque);
}
.outros a:active { transform: scale(.97); transition-duration: var(--dur-toque-saida); }
@media (hover: hover) { .outros a:hover { background: var(--cor-cobalto-veu); } }
.outros span { font: 600 .8125rem/1.2 var(--fonte-mono); letter-spacing: .04em; color: var(--cor-tinta-media); }
.outros strong { font: 700 1rem/1.25 var(--fonte-display); letter-spacing: -0.01em; }
.outros a:last-child { text-align: right; }
.voltar-lista {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px 0 0; margin-left: -4px;
  font: 600 .9375rem/1 var(--fonte-texto); color: var(--cor-cobalto); text-decoration: none; border-radius: var(--raio-xs);
}
.voltar-lista .an-icone { width: 18px; height: 18px; stroke-width: 2; }

.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; }

/* A entrada da página: sobe 12 px e assenta, em escada (catalogo.js). */
.js-cat [data-entra] { opacity: 0; }

/* =========================================================================
   TELA DEITADA (o computador, 24/09/2026)
   A mesma regra da sala e de catalogo.js (`Cat.largo`). Cada língua tem a
   sua composição (planta.css, maquete.css, divisao.css); aqui fica o comum:
   a visita com a câmera na metade da esquerda e a foto grande na da direita,
   e as fotos do imóvel em grade em vez da tira que corre de lado.
   ========================================================================= */
@media (min-width: 1600px) { :root { --largura: 1360px; } }
@media (min-width: 1024px) and (min-aspect-ratio: 5/4) {
  .visita--largo .visita__barra { right: auto; margin: 0; max-width: none; padding: 14px 0 20px; }
  .visita--largo .visita__nome { font-size: 1.75rem; }
  .visita--largo .visita__foto { box-shadow: var(--sombra-3); }
  .visita--largo .visita__fechar { top: 14px; right: 14px; }
  /* No computador a câmera mostra os nomes: é a planta ampliada, com o que está escrito nela. */
  /* A linha que separa as duas metades, fina, como a dobra de uma prancha. */
  .visita--largo .visita__fundo::after {
    content: ""; position: absolute; top: 76px; bottom: 28px; left: 45%; width: 1px;
    background: color-mix(in srgb, var(--tinta-planta) 22%, transparent);
  }

  .tira-cabeca.coluna { max-width: none; margin: 0; padding-inline: 0; }
  .tira { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; padding: 2px 0 0; overflow: visible; }
  .tira__item img { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  @media (hover: hover) {
    .tira__item img { transition: transform var(--dur-media) var(--mov-entrada), box-shadow var(--dur-media) var(--mov-toque); }
    .tira__item:hover img { transform: translateY(-2px); box-shadow: var(--sombra-2); }
  }
  .galeria__faixa { cursor: default; }
}

@media (prefers-reduced-motion: reduce) {
  .rx--visto .rx__item, .rx--visto .rx__etapa { animation-name: rx-chega-leve; }
  @keyframes rx-chega-leve { from { opacity: 0; } }
  .rx--visto .rx__marca path { animation: none; }
  .visita, .visita__foto, .visita__camera, .galeria, .galeria__quadro img { transition-property: none !important; }
}

/* A casa e a foto que atravessam de uma página a outra (24/09/2026): a foto da
   sala se dissolve na planta, a planta do cartão pousa na prancha, a foto vai
   ao cartão. O voo padrão do navegador (250 ms) era curto e seco. */
::view-transition-group(*.casa), ::view-transition-group(*.foto) { animation-duration: 560ms; animation-timing-function: var(--mov-cena); }
::view-transition-old(*.casa), ::view-transition-new(*.casa) { animation-duration: 420ms; }
/* Antes de o JavaScript montar a página, o palco guarda a altura da tela: numa
   transição entre páginas, a foto da página nova não sai com o rodapé lá em cima (5.2). */
.js-cat [data-palco]:empty { min-height: 100svh; }