/* 06 · Sala 506 (lo-) */
.lo-m1{right:-10%;top:-30%;width:62vw;height:90vh;max-width:900px}
.lo-m2{left:-15%;bottom:-30%;width:50vw;height:60vh;max-width:700px}
/* a luz do consultório fica atrás do nó da sala */
.lo-m3{right:max(2%,calc(50% - 600px));top:9%;width:34vw;height:34vw;max-width:460px;max-height:460px}

.lo-grade{
  display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);column-gap:4rem;
  grid-template-areas:"cabeca painel" "dados painel" "cit painel";grid-template-rows:auto auto 1fr;
}
.lo-cabeca{grid-area:cabeca}
.lo-dados{grid-area:dados;margin-top:2.2rem}
.lo-cit{grid-area:cit;align-self:end;margin-top:2.6rem}
.lo-painel{grid-area:painel;align-self:start}
.lo-cabeca .wf-t1{margin-bottom:1rem}
.lo-cabeca .wf-texto{max-width:40ch}

.lo-bloco{display:grid;grid-template-columns:5.2rem minmax(0,1fr);column-gap:1rem;align-items:baseline;padding:1.3rem 0;border-top:1px solid var(--wf-marfim-14)}
.lo-rotulo{font-family:var(--wf-fonte-mono);font-size:var(--wf-mono-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--wf-marfim-60)}
.lo-end{font-style:normal;font-family:var(--wf-fonte-mono);font-size:var(--wf-apoio);line-height:1.7;color:var(--wf-marfim)}
.lo-l{display:block}
.lo-l:first-child{color:var(--wf-marfim-80)}
.lo-copia{grid-column:2;margin-top:.7rem}
.lo-copiar{
  font-family:var(--wf-fonte-mono);font-size:var(--wf-mono);letter-spacing:.02em;color:var(--wf-marfim-80);
  border-bottom:1px solid var(--wf-marfim-35);padding:.5rem 0 .15em;min-height:32px;
  transition:color .3s,border-color .3s;
}
.lo-copiar:hover,.lo-copiar.lo-feito{color:var(--wf-marfim);border-color:var(--wf-marfim)}
.lo-horario{font-family:var(--wf-fonte-mono);font-size:var(--wf-apoio);line-height:1.7;color:var(--wf-marfim)}
.lo-acoes{grid-column:2;display:flex;flex-direction:column;align-items:flex-start;gap:1rem;margin-top:1rem}
.lo-acoes__2{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.3rem}
.lo-rota-link{min-height:44px}

/* painel: o endereço como caminho de nós; o último é a sala, aceso */
.lo-painel{border:1px solid var(--wf-marfim-14);border-radius:var(--wf-raio-caixa);overflow:hidden;background:color-mix(in oklab,var(--wf-noite-3) 22%,transparent)}
.lo-mapa{position:relative;aspect-ratio:4/3}
.lo-fios{position:absolute;inset:0;width:100%;height:100%}
.lo-fio{stroke:var(--wf-marfim);stroke-opacity:.35;stroke-width:.58;stroke-dasharray:1;stroke-dashoffset:0}
.lo-fio--aceso{stroke-opacity:.9}
.lo-rota{position:absolute;inset:0}
.lo-parada{position:absolute;left:var(--lo-x);top:var(--lo-y);display:flex;align-items:center;gap:.7rem;transform:translate(-3px,-50%);white-space:nowrap}
.lo-ponto{position:relative;flex:none;width:6px;height:6px;border-radius:50%;background:var(--wf-marfim)}
.lo-nome{font-family:var(--wf-fonte-mono);font-size:var(--wf-mono);letter-spacing:.02em;color:var(--wf-marfim-80)}
.lo-parada--fim{gap:1rem;transform:translate(-3.5px,-50%)}
.lo-parada--fim .lo-ponto{width:7px;height:7px}
.lo-parada--fim .lo-ponto::after{content:"";position:absolute;inset:-24px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in oklab,var(--wf-luz) 75%,transparent),transparent);animation:lo-pulsa 3.4s ease-in-out infinite}
@keyframes lo-pulsa{0%,100%{opacity:.55}50%{opacity:1}}
.lo-parada--fim .lo-nome{display:flex;flex-direction:column;color:var(--wf-marfim)}
.lo-antes{font-size:var(--wf-mono-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--wf-marfim-80)}
.lo-num{font-family:var(--wf-fonte-titulo);font-weight:600;font-size:clamp(3.4rem,2rem + 4.4vw,6rem);line-height:.9;letter-spacing:-.03em;transition:color 1s var(--wf-curva)}

/* gesto: o caminho se desenha trecho a trecho e a sala acende por último (lo.js põe as classes) */
.lo-espera .lo-fio{stroke-dashoffset:1}
.lo-espera .lo-parada--fim .lo-ponto::after{opacity:0;animation:none}
.lo-espera .lo-num{color:var(--wf-marfim-60)}
.lo-chegou .lo-fio{stroke-dashoffset:0;transition:stroke-dashoffset .5s var(--wf-curva)}
.lo-chegou .lo-fio:nth-child(2){transition-delay:.45s}
.lo-chegou .lo-fio:nth-child(3){transition-delay:.9s}
.lo-chegou .lo-fio:nth-child(4){transition-delay:1.35s}
.lo-chegou .lo-fio:nth-child(5){transition-delay:1.8s}
.lo-chegou .lo-num{transition-delay:2.1s}

/* mapa a pedido: entra por cima do caminho, em tom de noite */
.lo-quadro{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .6s var(--wf-curva);filter:invert(.92) hue-rotate(185deg) saturate(.75) brightness(.92) contrast(.92)}
.lo-quadro.lo-carregado{opacity:1}
.lo-quadro[hidden]{display:none}
.lo-mapa.lo-aberto .lo-rota,.lo-mapa.lo-aberto .lo-fios{opacity:.25;transition:opacity .4s}
/* véu marinho por cima do mapa escurecido: puxa o preto do filtro para a noite do site; não recebe toque */
.lo-mapa.lo-aberto.lo-pronto::after{content:"";position:absolute;inset:0;background:var(--wf-noite);mix-blend-mode:screen;opacity:.8;pointer-events:none}
.lo-barra{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1rem;border-top:1px solid var(--wf-marfim-14)}
.lo-coord{min-width:0;font-family:var(--wf-fonte-mono);font-size:var(--wf-mono-xs);letter-spacing:.04em;color:var(--wf-marfim-60)}
.lo-coord__b{color:var(--wf-marfim-80)}
.lo-coord [hidden]{display:none}
.lo-coord__a{display:flex;flex-wrap:wrap;align-items:baseline}
.lo-co{white-space:nowrap}
.lo-ver{min-height:44px;white-space:nowrap}
.lo-ver[aria-expanded="true"]{background:var(--wf-marfim-14);border-color:var(--wf-marfim)}

@media (max-width:899px){
  /* celular: título, caminho (a peça da seção), dados e ações, e a voz do paciente por último */
  .lo-grade{grid-template-columns:minmax(0,1fr);grid-template-areas:"cabeca" "painel" "dados" "cit";grid-template-rows:none}
  .lo-painel{margin-top:2rem}
  .lo-dados{margin-top:1.4rem}
  .lo-bloco:first-child{border-top:0}
  .lo-cit{margin-top:1.6rem}
  .lo-m3{right:auto;left:-30%;top:22%;width:90vw;height:90vw}
}
@media (max-width:1199px){
  .lo-grade{column-gap:3rem}
  .lo-bloco{grid-template-columns:minmax(0,1fr);row-gap:.5rem}
  .lo-copia,.lo-acoes{grid-column:1}
  /* em tela estreita a constelação vira lista vertical, com o fio à esquerda */
  .lo-mapa{aspect-ratio:auto;min-height:300px;padding:1.5rem 1.2rem 1.6rem}
  .lo-fios{display:none}
  .lo-rota{position:relative;inset:auto}
  .lo-parada{position:relative;left:auto;top:auto;transform:none;white-space:normal;align-items:baseline;padding-bottom:1.15rem}
  .lo-parada .lo-ponto{top:-.12em}
  .lo-parada:not(:last-child)::before{content:"";position:absolute;left:2.5px;top:.75em;height:100%;width:1px;background:var(--wf-marfim-35)}
  .lo-parada:nth-last-child(2)::before{background:var(--wf-marfim-80)}
  .lo-parada--fim{transform:none;padding-bottom:0;align-items:flex-start;gap:.7rem}
  .lo-parada--fim .lo-ponto{top:.3em;margin-left:-.5px}
}