/* Agência de Negócios — sala de entrada, versão 2: A PLANTA (23/09/2026).
   A sala desenhada como planta de arquiteto, a tinta cobalto no papel. O azul
   é onde a pessoa está: começa na sala. Tocou num cômodo, a porta abre, o azul
   passa pela porta e a câmera entra atrás dele. Planta não é o ícone de
   casinha que a marca proíbe: é parede, vão, arco e janela, sem telhado,
   fachada, chave ou pin. Todas as medidas do desenho estão em unidades do
   viewBox (360 × 460): o que é texto usa a largura do desenho (cqw). */

.sala--planta { background: var(--cor-superficie-papel); }
.planta { position: relative; background: var(--cor-superficie-papel); }
/* A câmera: durante a visita a um cômodo, a planta inteira vira camada fixa. */
.planta--camera { position: fixed; z-index: 4; margin: 0; transform-origin: 0 0; }
.planta__dentro { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 2px; padding-bottom: 20px; }

/* O desenho e o carimbo cabem juntos na primeira tela: a altura que sobra
   depois da marca e do carimbo decide a largura dos dois. planta.js mede e
   põe a largura certa em --largura-planta; a conta daqui (pela proporção da
   planta com a letra normal, 360 × 460) é a de quem está sem JS. */
.planta { --carimbo-reserva: 150px; --largura-planta: min(100%, calc((100svh - var(--topo-h) - var(--carimbo-reserva)) * 360 / 460), 560px); }
.planta__desenho {
  --u: calc(100cqw / 360); /* uma unidade do desenho */
  position: relative; container-type: inline-size;
  width: var(--largura-planta);
}
/* Os cômodos são uma grade: as paredes (6 de fora, 5 de dentro) são as
   linhas vazias, e cada fileira cresce com o que está escrito nela. Com a
   letra normal, o mínimo de cada cômodo desenha a planta de sempre; com a
   letra grande, a planta estica em altura e as paredes vêm atrás (planta.js). */
.planta__grade {
  --parede: calc(var(--u) * 5); --parede-fora: calc(var(--u) * 6);
  --c1: 210; /* o cômodo maior e o menor ficam na proporção áurea: 210 e 133 */
  display: grid;
  grid-template-columns: var(--parede-fora) calc(var(--u) * var(--c1)) var(--parede) 1fr var(--parede-fora);
  grid-template-rows: var(--parede-fora) auto var(--parede) auto var(--parede) auto var(--parede-fora);
  grid-template-areas:
    ". .      . .          ."
    ". papel  . comprar    ."
    ". .      . .          ."
    ". sala   sala sala    ."
    ". .      . .          ."
    ". vender . precatorio ."
    ". .      . .          .";
}
[data-piso="papel"], [data-comodo="papel"] { grid-area: papel; }
[data-piso="comprar"], [data-comodo="comprar"] { grid-area: comprar; }
[data-piso="sala"], [data-comodo="sala"] { grid-area: sala; }
[data-piso="vender"], [data-comodo="vender"] { grid-area: vender; }
[data-piso="precatorio"], [data-comodo="precatorio"] { grid-area: precatorio; }
.piso { position: relative; z-index: 0; background: var(--cor-cobalto-superficie); clip-path: circle(0px at 50% 50%); }
.piso--sala { clip-path: none; }

.planta__svg { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* a pena da entrada (planta.js): a mesma cena em peças que só se movem, por cima,
   enquanto o SVG espera escondido; elas saem quando a pena termina */
.planta__pena { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.planta__pena > span { position: absolute; display: block; }
.planta__pena-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* o azul que enche um piso: um disco da cor dele que cresce, recortado pelo piso (planta.js) */
.piso--disco { clip-path: none !important; background: transparent !important; overflow: hidden; }
.piso__disco { position: absolute; border-radius: 50%; pointer-events: none; }
/* a janela que desliza sobre a rubrica na entrada (planta.js) */
.rubrica__janela { position: absolute; overflow: hidden; pointer-events: none; }
.planta--pena .planta__svg .traco, .planta--pena .planta__svg .planta__hachura, .planta--pena .planta__svg .porta { visibility: hidden; }
.planta__hachura-linha { stroke: var(--cor-cobalto); stroke-width: .7; opacity: .5; }
/* 5.3 (24/09/2026), a sala mais limpa: o miolo da parede é um azul claro liso
   entre os dois traços (a hachura de prancha e as janelas saíram; menos linha,
   mais ar; cheia de cobalto, a parede pesava). */
.planta__hachura { fill: color-mix(in srgb, var(--cor-cobalto) 26%, var(--cor-superficie-papel)); }
.planta__janelas { display: none; }
.janela__vao { fill: var(--cor-superficie-papel); }
.janela__vidro, .janela__batente { fill: none; stroke: var(--cor-cobalto); stroke-width: .8; }
.traco { fill: none; stroke: var(--cor-cobalto); stroke-width: 1.25; stroke-linecap: square; stroke-dasharray: 1; stroke-dashoffset: 0; }
.traco--fora { stroke-width: 1.6; }
.porta__folha { fill: none; stroke: var(--cor-cobalto); stroke-width: 2.2; stroke-linecap: round; transform-box: view-box; transform: rotate(var(--entreaberta)); }
.porta__arco { fill: none; stroke: var(--cor-cobalto); stroke-width: .8; stroke-dasharray: 2.5 2.5; opacity: .55; }
/* Cada folha gira no seu batente (o ponto vem de planta.js, que sabe onde a
   parede ficou; o daqui é o da letra normal). Fechada, ela cobre o vão;
   entreaberta, convida. */
[data-porta="papel"] .porta__folha      { transform-origin: 204px 170px; }
[data-porta="comprar"] .porta__folha    { transform-origin: 238px 170px; }
[data-porta="vender"] .porta__folha     { transform-origin: 204px 288px; }
[data-porta="precatorio"] .porta__folha { transform-origin: 350px 288px; }
[data-porta="rua"] .porta__folha        { transform-origin: 354px 246px; }
[data-porta="papel"], [data-folha="papel"]           { --fechada: -90deg; --entreaberta: -68deg; --apertada: -52deg; }
[data-porta="comprar"], [data-folha="comprar"]       { --fechada: 90deg;  --entreaberta: 68deg;  --apertada: 52deg; }
[data-porta="vender"], [data-folha="vender"]         { --fechada: 90deg;  --entreaberta: 68deg;  --apertada: 52deg; }
[data-porta="precatorio"], [data-folha="precatorio"] { --fechada: 90deg;  --entreaberta: 68deg;  --apertada: 52deg; }
[data-porta="rua"], [data-folha="rua"]               { --fechada: 90deg;  --entreaberta: 0deg; }
/* As folhas de verdade (25/09/2026): com JS, cada folha é uma barra por cima do
   desenho, que o navegador gira sem redesenhar a planta (planta.js põe o lugar
   e a dobradiça, em unidades do desenho). A do SVG fica para quem está sem JS. */
.planta__folhas { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.folha-porta { position: absolute; display: block; border-radius: 999px; background: var(--cor-cobalto); transform: rotate(var(--entreaberta)); }
.planta--folhas .porta__folha { display: none; }
/* A porta da rua fica dentro do azul da sala: desenhada em branco. */
[data-porta="rua"] .porta__folha, [data-porta="rua"] .porta__arco { stroke: var(--cor-sobre-cobalto); }
[data-folha="rua"] { background: var(--cor-sobre-cobalto); }
/* O dedo no cômodo já abre um pouco a porta dele. */
.porta__folha, .folha-porta { transition: transform var(--dur-curta) var(--mov-entrada); }
/* enquanto a pena desenha, as folhas saem do batente pela mão dela, sem transição por baixo */
.planta--pena .folha-porta { transition: none; }
.planta__desenho:has([data-comodo="papel"]:active) :is([data-porta="papel"] .porta__folha, [data-folha="papel"]),
.planta__desenho:has([data-comodo="comprar"]:active) :is([data-porta="comprar"] .porta__folha, [data-folha="comprar"]),
.planta__desenho:has([data-comodo="vender"]:active) :is([data-porta="vender"] .porta__folha, [data-folha="vender"]),
.planta__desenho:has([data-comodo="precatorio"]:active) :is([data-porta="precatorio"] .porta__folha, [data-folha="precatorio"]) { transform: rotate(var(--apertada)); }

/* ---- os nomes dos cômodos --------------------------------------------------
   A letra acompanha o desenho (em unidades dele) até um piso, e o piso segue a
   letra que a pessoa escolheu no celular (rem): nome a 17 px, pista a 15 px,
   rótulo a 13. Quem aumenta a letra vê o desenho crescer junto. */
.comodo {
  position: relative; z-index: 2; display: flex; flex-direction: column; margin: 0;
  padding: calc(var(--u) * 14); min-width: 0;
  background: none; border: 0; text-align: left; color: var(--cor-tinta-forte); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
/* O mínimo de cada cômodo é o tamanho dele na planta com a letra normal. Os
   de cima guardam embaixo o lugar do arco da porta; os de baixo, em cima. */
[data-comodo="papel"], [data-comodo="comprar"] { min-height: calc(var(--u) * 164); }
[data-comodo="comprar"] { padding-bottom: calc(var(--u) * 38); }
[data-comodo="sala"] { min-height: calc(var(--u) * 108); }
[data-comodo="vender"], [data-comodo="precatorio"] { min-height: calc(var(--u) * 166); padding-top: calc(var(--u) * 38); }
.comodo--quarto::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cor-cobalto-veu); opacity: 0;
  transition: opacity var(--dur-toque) var(--mov-toque);
}
.comodo--quarto:active::before { opacity: 1; }
@media (hover: hover) { .comodo--quarto:hover::before { opacity: .55; } }
/* com a câmera dentro do cômodo, o mouse parado em cima não clareia o azul */
.planta--camera .comodo--quarto::before { opacity: 0 !important; }
.comodo--quarto:focus-visible { outline: 2px solid var(--cor-cobalto); outline-offset: -4px; }
.comodo__rotulo { display: flex; flex-direction: column; min-width: 0; }
/* A segunda demão do nome (planta.js): o mesmo texto, na cor que ele vai ter,
   exatamente por cima; acende só com opacidade quando o azul enche o cômodo. */
.tem-demao { position: relative; }
.demao { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.comodo__num {
  display: flex; align-items: center; gap: .45em;
  font: 600 max(calc(var(--u) * 13), .8125rem)/1 var(--fonte-mono); letter-spacing: .1em; color: var(--cor-cobalto);
}
.comodo__nome {
  margin-top: calc(var(--u) * 7); font: 700 max(calc(var(--u) * 17), 1.0625rem)/1.05 var(--fonte-display);
  letter-spacing: -0.03em; text-wrap: balance; overflow-wrap: break-word; hyphens: manual;
}
.comodo__apoio { margin-top: calc(var(--u) * 6); font: 400 max(calc(var(--u) * 13.5), .9375rem)/1.35 var(--fonte-texto); color: var(--cor-tinta-media); }
/* No cômodo fica só o nome (5.3): a pista mora na lista do computador e no quarto. */
.comodo--quarto .comodo__apoio { display: none; }
[data-comodo="papel"] .comodo__nome { font-size: max(calc(var(--u) * 21), 1.1875rem); max-width: 9ch; }
[data-comodo="papel"] .comodo__apoio { max-width: 20ch; }
[data-comodo="comprar"] .comodo__nome { max-width: 9ch; }
[data-comodo="vender"] .comodo__nome { font-size: max(calc(var(--u) * 19), 1.125rem); max-width: 10ch; }
[data-comodo="vender"] .comodo__apoio { max-width: 20ch; }
/* o menor cômodo: "precatório" desce até 15 px antes de se partir */
[data-comodo="precatorio"] .comodo__nome { font-size: max(calc(var(--u) * 15.5), .9375rem); max-width: 8ch; overflow-wrap: normal; }
/* Os quartos de baixo têm a porta no alto: o nome fica embaixo do arco. */
[data-comodo="vender"], [data-comodo="precatorio"] { justify-content: flex-end; }
[data-comodo="precatorio"] { padding-right: calc(var(--u) * 10); }

/* A sala: azul, porque a pessoa está nela. À direita, o arco da porta da rua. */
.comodo--sala { z-index: 2; justify-content: center; padding: calc(var(--u) * 12) calc(var(--u) * 46) calc(var(--u) * 12) calc(var(--u) * 16); color: var(--cor-sobre-cobalto); pointer-events: none; cursor: default; }
.comodo__aqui {
  display: flex; align-items: center; gap: .55em;
  font: 600 max(calc(var(--u) * 12.5), .8125rem)/1.15 var(--fonte-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cor-sobre-cobalto-apoio);
}
.comodo--sala .comodo__nome { margin-top: calc(var(--u) * 8); font-size: max(calc(var(--u) * 24), 1.25rem); }
.comodo--sala .comodo__apoio { margin-top: calc(var(--u) * 5); font-size: max(calc(var(--u) * 14), .9375rem); color: var(--cor-sobre-cobalto-apoio); }
/* "Você": o balão coral da marca. Anda com a pessoa de um cômodo para o outro.
   Medido pela letra do rótulo, para crescer junto com ela. */
.voce, .voce-vaga { flex: none; width: 1.04em; height: .88em; }
.voce { position: relative; z-index: 3; border-radius: 45% 45% 45% 12%; background: var(--cor-coral); transform-origin: 0 100%; }
.voce-vaga { display: none; }

/* ---- letra grande para a tela -------------------------------------------------
   Quando a tela tem menos de 20 letras de largura (celular pequeno, ou a letra
   do celular aumentada: 320 px com a letra normal, 416 com a letra a 130%), o
   desenho toma a largura toda, os dois cômodos de cada fileira ficam do mesmo
   tamanho (no áureo, "precatório" não cabia no menor) e quem assina vem antes
   da planta: a primeira pergunta de quem aumenta a letra é "isso é de
   verdade?". A mesa faz o mesmo com o cartão. */
@media (max-width: 20em) {
  .planta__desenho { width: 100%; }
  .planta__grade { --c1: 171.5; }
  [data-comodo="papel"] { padding-bottom: calc(var(--u) * 38); }
  [data-comodo="papel"] .comodo__nome, [data-comodo="comprar"] .comodo__nome,
  [data-comodo="vender"] .comodo__nome, [data-comodo="precatorio"] .comodo__nome { max-width: none; }
  .carimbo { order: -1; }
}

/* ---- quem responde pela planta: o cartão (5.3, 24/09/2026) -----------------------
   Era o carimbo de prancha, em células com linha de tinta; ficou um cartão
   simples, como o da maquete: quem é, o registro, a empresa, onde, e o WhatsApp
   como botão. A rubrica continua: quem responde assina, por último na entrada.
   Responde ao "isso é de verdade?" na primeira tela, com letra de ler. */
.carimbo {
  --carimbo-w: var(--largura-planta);
  display: flex; flex-direction: column; gap: 12px; width: var(--carimbo-w); padding: 12px 14px 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);
}
.carimbo__assina {
  position: relative; display: flex; flex-direction: column; gap: 1px; min-width: 0; margin: -4px -6px 0; padding: 4px 6px 2px; border-radius: var(--raio-sm);
  font: 400 .9375rem/1.3 var(--fonte-texto); color: var(--cor-tinta-forte);
}
.carimbo__rotulo { margin-bottom: 3px; font: 400 .8125rem/1 var(--fonte-mono); letter-spacing: .04em; text-transform: lowercase; color: var(--cor-tinta-media); }
.carimbo__nome { align-self: flex-start; margin-bottom: 1px; font: 700 1.125rem/1.2 var(--fonte-display); letter-spacing: -0.02em; }
.carimbo__linha { color: var(--cor-tinta-media); }
/* A rubrica: um traço de pena no canto, passando da borda como passa quem assina
   à mão. Não cruza o nome impresso (riscado, leria "cancelado"). */
.carimbo__rubrica {
  position: absolute; right: 2px; top: -8px; width: min(96px, 38%); height: auto; max-width: none; overflow: visible; pointer-events: none;
  fill: none; stroke: var(--cor-cobalto); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.carimbo__rubrica path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.carimbo__num { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* A ficha: o círculo que, no desenho técnico, aponta um trecho para ver
   ampliado. O quadro inteiro de quem responde é o alvo do toque. */
.carimbo__linha--fim { display: flex; align-items: flex-end; gap: 8px; }
.carimbo__assina { container-type: inline-size; }
@container (max-width: 240px) { .carimbo__ficha-texto { display: none; } }
.carimbo__ficha {
  display: flex; align-items: center; gap: 5px; margin: 0 0 -2px auto; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--cor-cobalto); -webkit-tap-highlight-color: transparent;
}
.carimbo__ficha::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* o quadro todo */
.carimbo__ficha-texto { font: 400 .8125rem/1 var(--fonte-mono); letter-spacing: .04em; }
.carimbo__chamada {
  flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round;
  transition: transform var(--dur-toque) var(--mov-entrada);
}
.carimbo__assina { transition: background-color var(--dur-toque) var(--mov-toque); }
.carimbo__assina:has(.carimbo__ficha:active) { background: var(--cor-cobalto-veu); }
.carimbo__assina:has(.carimbo__ficha:active) .carimbo__chamada { transform: scale(1.12); }
@media (hover: hover) { .carimbo__assina:has(.carimbo__ficha:hover) { background: var(--cor-cobalto-veu); } }
.carimbo__ficha:focus-visible { outline: none; }
.carimbo__ficha:focus-visible::after { outline: 2px solid var(--cor-cobalto); outline-offset: 0; }
/* O WhatsApp: o botão da marca, cheio, a ação da página. */
.carimbo__zap {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px;
  border-radius: var(--raio-pilula); background: var(--cor-cobalto-superficie); color: var(--cor-sobre-cobalto); text-decoration: none;
  transition: background-color var(--dur-toque) var(--mov-toque), transform var(--dur-toque) var(--mov-entrada);
}
.carimbo__zap-nome { font: 700 1.0625rem/1.2 var(--fonte-display); letter-spacing: -0.01em; }
.carimbo__zap .an-icone { width: 18px; height: 18px; transition: transform var(--dur-toque) var(--mov-entrada); }
.carimbo__zap:active { transform: scale(.98); background: var(--cor-cobalto-superficie-hover); transition-duration: var(--dur-toque-saida); }
.carimbo__zap:active .an-icone { transform: translate(2px, -2px); }
@media (hover: hover) { .carimbo__zap:hover { background: var(--cor-cobalto-superficie-hover); } .carimbo__zap:hover .an-icone { transform: translate(2px, -2px); } }
.carimbo__zap:focus-visible { outline: 2px solid var(--cor-cobalto); outline-offset: 3px; }
@media (max-width: 330px), (max-width: 20em) { .carimbo { --carimbo-w: 100%; } }
/* No celular o cartão é compacto (a planta ganha a altura): o nome com a rubrica
   já diz quem responde, e o botão fica um pouco mais baixo. */
@media not ((min-width: 1024px) and (min-aspect-ratio: 5/4)) {
  .carimbo { gap: 10px; padding-top: 12px; }
  .carimbo__rotulo { display: none; }
  .carimbo__rubrica { top: -10px; }
  .carimbo__zap { min-height: 46px; }
}

/* ---- o detalhe ampliado ------------------------------------------------------------
   Uma folha que cobre a tela e nasce como círculo da chamada do carimbo
   (planta.js anima o recorte). Letra de ler, como o resto: o que está aqui é
   para a Dona Lúcia e o Seu Antônio conferirem com calma. */
.detalhe { position: fixed; inset: 0; z-index: 61; }
.detalhe__palco { position: absolute; inset: 0; background: var(--cor-superficie-papel); overflow: hidden; }
/* A lente (planta.js): enquanto o círculo cresce ou encolhe, a moldura redonda é
   o recorte, e o palco dentro dela tem o tamanho e o lugar de sempre. */
.detalhe__lente { position: absolute; inset: 0; }
.detalhe--lente .detalhe__lente { inset: auto; border-radius: 50%; overflow: hidden; }
.detalhe--lente .detalhe__palco { right: auto; bottom: auto; }
.detalhe__rolagem { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.detalhe__folha {
  display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 620px; margin: 0 auto;
  padding: calc(64px + env(safe-area-inset-top)) var(--lateral) calc(48px + env(safe-area-inset-bottom));
}
.detalhe__rotulo {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font: 600 .8125rem/1.2 var(--fonte-mono); letter-spacing: var(--tracking-rotulo); text-transform: uppercase; color: var(--cor-cobalto);
}
/* O número do detalhe, no círculo, como nas pranchas. */
.detalhe__marca { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border: 1.5px solid currentColor; border-radius: 50%; letter-spacing: 0; }
.detalhe__titulo { margin: 0; font: 700 2rem/1.05 var(--fonte-display); letter-spacing: -0.035em; outline: none; }
.detalhe__texto { margin: 0; font: var(--texto-corpo); color: var(--cor-tinta-media); max-width: 44ch; }
.detalhe__ficha { margin-top: 4px; }
.detalhe__conferir {
  display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1.5px dashed var(--cor-cobalto); border-radius: var(--raio-md);
}
.detalhe__conferir-titulo { font: 700 1.125rem/1.25 var(--fonte-display); letter-spacing: -0.02em; }
.detalhe__conferir p { margin: 0; font: 400 1rem/1.5 var(--fonte-texto); color: var(--cor-tinta-media); }
.detalhe__link { display: inline-block; margin-top: 2px; color: var(--cor-cobalto); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; border-radius: var(--raio-xs); }
.detalhe__acao { align-self: flex-start; width: 100%; max-width: 420px; margin-top: 6px; }
.detalhe__nota { margin: 0; font: 400 .9375rem/1.4 var(--fonte-texto); color: var(--cor-tinta-media); }
.detalhe__fechar { top: calc(10px + env(safe-area-inset-top)); }

/* ---- o quarto, visto de dentro --------------------------------------------------
   O alto do quarto é o próprio desenho ampliado, que fica parado atrás; a
   folha sobe por cima dele. O título real existe para quem lê com leitor de
   tela; quem vê, lê o nome do cômodo na planta. */
.quarto--planta .quarto__palco { background: transparent; }
.quarto--planta .quarto__heroi { padding: 0; min-height: 0; }
.quarto--planta .quarto__titulo, .quarto--planta .quarto__heroi-sub { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.quarto--planta .quarto__folha { border-radius: 24px 24px 0 0; box-shadow: var(--sombra-3); min-height: 60svh; }
.quarto--planta .quarto__fechar { top: 10px; }
.quarto--planta.quarto--simples .quarto__palco { background: var(--cor-superficie-papel); }
.quarto--planta.quarto--simples .quarto__heroi { padding: 64px var(--lateral) 8px; }
.quarto--planta.quarto--simples .quarto__titulo { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
.quarto--planta.quarto--simples .quarto__folha { box-shadow: none; }

/* ---- o computador (tela deitada, 24/09/2026; limpo na 5.3) -------------------------
   A planta ocupa a tela abaixo da marca, no maior tamanho em que cabe inteira;
   à direita, a lista dos cômodos com a pista de cada um e, embaixo dela, o
   cartão de quem responde. Sem a moldura, o norte e o nome do desenho de
   prancha: mais ar (5.3). */
.legenda { display: none; }
@media (min-width: 1024px) and (min-aspect-ratio: 5/4) {
  .sala--planta .planta__dentro {
    --col: clamp(300px, 29vw, 380px);
    position: relative; display: grid; gap: 0 40px; align-items: stretch;
    grid-template-columns: minmax(0, 1fr) var(--col);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "desenho legenda" "desenho carimbo";
    height: calc(100svh - var(--topo-h) - 24px); min-height: 560px; max-height: 1040px;
    padding-top: 0; padding-bottom: 0; margin-bottom: 24px;
  }
  /* A planta no meio do campo. */
  .sala--planta .planta__desenho { grid-area: desenho; align-self: center; justify-self: center; margin-bottom: 0; }
  .sala--planta .carimbo { grid-area: carimbo; --carimbo-w: auto; width: auto; margin-bottom: 8px; }
  .sala--planta .carimbo__zap { min-height: 52px; }
  .sala--planta .carimbo__zap-nome { font-size: 1.125rem; }

  /* A lista: os quatro cômodos, com o número da planta e a pista de cada um. */
  .legenda { display: flex; grid-area: legenda; flex-direction: column; justify-content: center; min-height: 0; padding: 12px 0 20px; overflow: hidden; container-type: size; }
  /* Tela baixa (notebook pequeno, ou a letra aumentada): a pista sai antes de a lista apertar. */
  @container (max-height: 400px) { .legenda__item { padding-block: 8px; } .legenda__apoio { display: none; } }
  .legenda__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .legenda__item {
    position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 4px; row-gap: 3px; width: 100%;
    margin: 0; padding: 14px 34px 14px 8px; border: 0; border-bottom: 1px solid var(--cor-borda-hairline);
    background: none; text-align: left; cursor: pointer; color: var(--cor-tinta-forte); border-radius: 0;
    transition: background-color var(--dur-toque) var(--mov-toque);
  }
  .legenda__lista li:first-child .legenda__item { border-top: 1px solid var(--cor-borda-hairline); }
  /* A seta que diz "entra": aparece e anda um passo quando o cômodo está na mira. */
  .legenda__item::after {
    content: ""; position: absolute; right: 12px; top: 50%; width: 9px; height: 9px; margin-top: -5px;
    border-top: 1.75px solid var(--cor-cobalto); border-right: 1.75px solid var(--cor-cobalto); transform: translateX(-6px) rotate(45deg); opacity: 0;
    transition: opacity var(--dur-curta) var(--mov-toque), transform var(--dur-curta) var(--mov-entrada);
  }
  .legenda__item:active { background: var(--cor-cobalto-veu); }
  .legenda__num { grid-row: 1 / span 2; padding-top: 4px; font: 600 .8125rem/1 var(--fonte-mono); letter-spacing: .1em; color: var(--cor-cobalto); }
  .legenda__nome { font: 700 1.0625rem/1.2 var(--fonte-display); letter-spacing: -0.02em; }
  .legenda__apoio { font: 400 .9375rem/1.35 var(--fonte-texto); color: var(--cor-tinta-media); }

  /* O cômodo e o nome dele na legenda acendem juntos: o mouse num acende o
     outro, e a porta do cômodo já abre um pouco (como o dedo no celular). */
  .planta__dentro:has([data-comodo="papel"]:is(:hover, :focus-visible)) [data-legenda-item="papel"],
  .planta__dentro:has([data-comodo="comprar"]:is(:hover, :focus-visible)) [data-legenda-item="comprar"],
  .planta__dentro:has([data-comodo="vender"]:is(:hover, :focus-visible)) [data-legenda-item="vender"],
  .planta__dentro:has([data-comodo="precatorio"]:is(:hover, :focus-visible)) [data-legenda-item="precatorio"],
  .legenda__item:hover { background: var(--cor-cobalto-veu); }
  .planta__dentro:has([data-comodo="papel"]:is(:hover, :focus-visible)) [data-legenda-item="papel"]::after,
  .planta__dentro:has([data-comodo="comprar"]:is(:hover, :focus-visible)) [data-legenda-item="comprar"]::after,
  .planta__dentro:has([data-comodo="vender"]:is(:hover, :focus-visible)) [data-legenda-item="vender"]::after,
  .planta__dentro:has([data-comodo="precatorio"]:is(:hover, :focus-visible)) [data-legenda-item="precatorio"]::after,
  .legenda__item:hover::after { opacity: 1; transform: rotate(45deg); }
  .planta__dentro:has([data-legenda-item="papel"]:hover) [data-comodo="papel"]::before,
  .planta__dentro:has([data-legenda-item="comprar"]:hover) [data-comodo="comprar"]::before,
  .planta__dentro:has([data-legenda-item="vender"]:hover) [data-comodo="vender"]::before,
  .planta__dentro:has([data-legenda-item="precatorio"]:hover) [data-comodo="precatorio"]::before { opacity: .55; }
  .planta__dentro:has([data-comodo="papel"]:hover, [data-legenda-item="papel"]:hover) :is([data-porta="papel"] .porta__folha, [data-folha="papel"]),
  .planta__dentro:has([data-comodo="comprar"]:hover, [data-legenda-item="comprar"]:hover) :is([data-porta="comprar"] .porta__folha, [data-folha="comprar"]),
  .planta__dentro:has([data-comodo="vender"]:hover, [data-legenda-item="vender"]:hover) :is([data-porta="vender"] .porta__folha, [data-folha="vender"]),
  .planta__dentro:has([data-comodo="precatorio"]:hover, [data-legenda-item="precatorio"]:hover) :is([data-porta="precatorio"] .porta__folha, [data-folha="precatorio"]) { transform: rotate(var(--apertada)); }
  .comodo--quarto { cursor: pointer; }
  .comodo--quarto:focus-visible { outline-offset: -6px; }

  /* No painel do quarto, o alto é do botão de fechar: o conteúdo começa abaixo dele. */
  .quarto--planta.quarto--largo .quarto__folha { padding-top: 76px; }

  /* O detalhe (a ficha de quem responde) abre na coluna da direita, por cima
     da legenda e do carimbo: o círculo da chamada cresce até tomar a coluna,
     e a planta continua à vista. Clicar fora dele fecha. */
  .detalhe { cursor: zoom-out; }
  .detalhe__palco { left: auto; width: var(--painel-w); cursor: auto; box-shadow: var(--sombra-3); border-radius: 24px 0 0 0; }
  .detalhe__folha { padding: 34px 34px 48px; }
}

/* Antes da entrada: nada do que vai se desenhar aparece. */
.js-movimento:not(.sala--pronta) .sala--planta .traco { stroke-dashoffset: 1; }
.js-movimento:not(.sala--pronta) .sala--planta .planta__hachura,
.js-movimento:not(.sala--pronta) .sala--planta .porta__arco,
.js-movimento:not(.sala--pronta) .sala--planta .comodo__rotulo,
.js-movimento:not(.sala--pronta) .sala--planta .carimbo { opacity: 0; }
.js-movimento:not(.sala--pronta) .sala--planta :is(.porta__folha, .folha-porta) { transform: rotate(var(--fechada)); }
.js-movimento:not(.sala--pronta) .sala--planta .piso--sala { clip-path: circle(0px at 100% 55%); }
.js-movimento:not(.sala--pronta) .sala--planta .carimbo__rubrica path { stroke-dashoffset: 1; }
.js-movimento:not(.sala--pronta) .sala--planta .legenda__lista li { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .porta__folha, .folha-porta { transition-duration: 0ms; }
}
/* enquanto a conta da largura mede (planta.js, caber) */
.planta--medindo, .planta--medindo * { transition-property: none !important; }