/* lo · Onde atendo (#locais, papel) — os quatro hospitais no aro do logo */

.lo-sec{--lo-tinta:var(--tinta-papel)}
.lo-cab{display:grid;grid-template-columns:minmax(0, 1fr) minmax(280px, 380px);gap:32px clamp(40px, 6vw, 110px);align-items:end}
.lo-cab-txt{max-width:720px}
.lo-antes{position:relative;padding:22px 24px 20px;border-radius:10px;background:rgba(220,228,222,.55);box-shadow:inset 0 0 0 1px var(--papel-fio)}
.lo-antes::before{content:"";position:absolute;left:24px;top:-5px;width:9px;height:9px;border-radius:50%;background:var(--papel);box-shadow:inset 0 0 0 1.5px var(--salvia-escura)}
.lo-antes-tit{margin:0 0 12px;color:var(--salvia-escura);text-transform:uppercase;letter-spacing:.12em}
.lo-antes dl{margin:0;display:grid;gap:12px}
.lo-antes dt{font-size:.72rem;color:var(--tinta-papel-fina);letter-spacing:.06em}
.lo-antes dd{margin:2px 0 0;font-size:.96rem;line-height:1.5;color:var(--tinta-papel-suave)}
.lo-antes strong{color:var(--tinta-papel);font-weight:650}
.lo-antes-zap{display:inline-flex;align-items:center;gap:10px;margin-top:14px;min-height:44px;font-weight:700;font-variation-settings:"wdth" 88;color:var(--tinta-papel);text-decoration:none;border-bottom:1px solid var(--papel-fio)}
.lo-antes-zap .wf-mono{font-weight:400;color:var(--salvia-escura);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em}
.lo-antes-zap:hover{border-color:currentColor}

.lo-corpo{margin-top:clamp(40px, 5vw, 72px);display:grid;grid-template-columns:minmax(0, 480px) minmax(0, 1fr);gap:clamp(28px, 4vw, 56px);align-items:start}
.lo-prancha{grid-column:2;grid-row:1;position:relative;aspect-ratio:1760/1200;color:var(--tinta-papel)}
.lo-fichas{grid-column:1;grid-row:1;position:relative;padding-top:clamp(8px, 2vw, 28px)}

/* ---------- desenho ---------- */
.lo-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lo-aro{fill:none;stroke:var(--tinta-papel);stroke-opacity:.5;stroke-width:1.3;vector-effect:non-scaling-stroke}
.lo-aro2{fill:none;stroke:var(--azul-bordado);stroke-opacity:.45;stroke-width:1;stroke-dasharray:2 7;vector-effect:non-scaling-stroke}
.lo-esc{fill:var(--tinta-papel);opacity:.3}
.lo-trilha{fill:none;stroke:var(--azul-bordado);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke}
.lo-mao{fill:var(--azul-bordado)}
.lo-hum{fill:var(--tinta-papel)}
.lo-eixo{stroke:var(--azul-bordado);stroke-width:1.2;stroke-dasharray:4 5;vector-effect:non-scaling-stroke}
.lo-pivo{fill:none;stroke:var(--azul-bordado);stroke-width:1.2;vector-effect:non-scaling-stroke}
.lo-fio{fill:none;stroke:var(--tinta-papel);stroke-opacity:.28;stroke-width:1;vector-effect:non-scaling-stroke;transition:stroke-opacity .5s}
.lo-fio.lo-on{stroke-opacity:.9}
.lo-ponto{cursor:pointer}
.lo-ponto-alvo{fill:transparent}
.lo-ponto-aro{fill:var(--papel);stroke:var(--tinta-papel);stroke-width:1.3;vector-effect:non-scaling-stroke;transition:fill .4s}
.lo-ponto-miolo{fill:var(--azul-bordado);transition:fill .4s}
.lo-ponto.lo-on .lo-ponto-aro{fill:var(--tinta-papel)}
.lo-ponto.lo-on .lo-ponto-miolo{fill:var(--papel)}
.lo-ponto-n{font-family:var(--f-mono);font-size:30px;fill:var(--tinta-papel-fina);letter-spacing:.04em}
.lo-ponto.lo-on .lo-ponto-n{fill:var(--tinta-papel)}
.lo-halo{fill:none;stroke:var(--azul-bordado);stroke-width:1.2;vector-effect:non-scaling-stroke;opacity:0;transform-box:fill-box;transform-origin:center}
.lo-halo.lo-pulsa{animation:lo-pulsa 1.6s var(--curva) .5s}
@keyframes lo-pulsa{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}

/* ---------- rótulos = abas ---------- */
.lo-tabs{position:absolute;inset:0;pointer-events:none}
.lo-tab{pointer-events:auto;position:absolute;right:calc(100% - var(--lo-x));top:var(--lo-y);transform:translateY(-50%);
  display:flex;align-items:center;gap:10px;padding:8px 12px 8px 0;margin:0;border:0;background:none;color:var(--tinta-papel-suave);font:inherit;text-align:right;cursor:pointer;min-height:44px}
.lo-tab-n{order:2;font-family:var(--f-mono);font-size:.74rem;color:var(--tinta-papel-fina);letter-spacing:.06em}
.lo-tab-txt{display:flex;flex-direction:column;gap:2px}
.lo-tab-nome{font-weight:650;font-variation-settings:"wdth" 84;font-size:1.04rem;line-height:1.1;white-space:nowrap;transition:color .3s}
.lo-tab-bairro{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.04em;color:var(--tinta-papel-fina);white-space:nowrap}
.lo-tab:hover .lo-tab-nome{color:var(--tinta-papel)}
.lo-tab[aria-selected="true"]{color:var(--tinta-papel)}
.lo-tab[aria-selected="true"] .lo-tab-nome{font-weight:800}

/* ---------- ficha ---------- */
.lo-painel{outline-offset:6px}
.lo-painel.lo-entra{animation:lo-entra .7s var(--curva) both}
@keyframes lo-entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.lo-f-n{margin:0;color:var(--salvia-escura);text-transform:uppercase;letter-spacing:.1em}
.lo-f-nome{margin:10px 0 0;font-weight:800;font-variation-settings:"wdth" 75;font-size:clamp(2rem, 1.3rem + 1.6vw, 2.8rem);line-height:.98;letter-spacing:-.005em}
.lo-f-end{margin:12px 0 0;font-size:1.06rem;line-height:1.5;color:var(--tinta-papel)}
.lo-f-end span{font-family:var(--f-mono);font-size:.8rem;letter-spacing:.04em;color:var(--tinta-papel-suave)}
.lo-midia{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lo-foto,.lo-mapa{position:relative;margin:0;aspect-ratio:1;border-radius:8px;overflow:clip;background:var(--papel-2);box-shadow:0 0 0 1px var(--papel-fio)}
.lo-foto img{width:100%;height:100%;object-fit:cover}
.lo-leg{grid-column:1/-1;margin:2px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:.72rem;color:var(--tinta-papel-fina)}
.lo-leg span::before{content:"";display:inline-block;width:18px;height:1px;background:currentColor;vertical-align:middle;margin-right:8px;opacity:.6}
.lo-entra .lo-foto img,.lo-entra .lo-tipo-cidade{animation:lo-cortina 1.1s var(--curva-articula) both}
@keyframes lo-cortina{from{clip-path:inset(0 0 100% 0);transform:scale(1.06)}to{clip-path:inset(0 0 0 0);transform:none}}
.lo-f-num{position:absolute;right:0;top:-.12em;z-index:-1;font-weight:800;font-variation-settings:"wdth" 75;font-size:clamp(7rem, 4rem + 7vw, 11rem);line-height:.8;color:rgba(78,106,96,.1);-webkit-mask:linear-gradient(180deg, #000 55%, transparent 96%);mask:linear-gradient(180deg, #000 55%, transparent 96%);pointer-events:none;user-select:none}
.lo-painel{position:relative}
.lo-mapa iframe{position:absolute;left:0;top:-110px;width:100%;height:calc(100% + 110px);border:0;filter:grayscale(.85) contrast(1.02)}
.lo-foto-tipo{display:flex;flex-direction:column;justify-content:center;padding:18px;background:linear-gradient(in oklab 160deg, var(--papel-salvia), var(--papel-2))}
.lo-tipo-cidade{font-weight:800;font-variation-settings:"wdth" 75;font-size:clamp(1.6rem, 1rem + 1.4vw, 2.3rem);line-height:.95;color:var(--tinta-papel)}
.lo-tipo-rua{margin-top:10px;font-family:var(--f-mono);font-size:.74rem;color:var(--tinta-papel-suave)}
.lo-acoes{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px}


/* sem JS: todas as fichas abertas */
html:not(.js) .lo-painel[hidden]{display:block;margin-top:48px}

/* ---------- tablet: prancha em cima, ficha embaixo ---------- */
@media (max-width:1199px){
  .lo-corpo{grid-template-columns:1fr}
  .lo-prancha,.lo-fichas{grid-column:1;grid-row:auto}
  .lo-fichas{max-width:640px}
}
@media (max-width:1023px){
  .lo-cab{grid-template-columns:1fr;align-items:start}
  .lo-antes{max-width:560px}
}

/* ---------- celular: só o aro; abas em grade embaixo ---------- */
@media (max-width:699px){
  .lo-prancha{aspect-ratio:auto;display:flex;flex-direction:column}
  .lo-svg{position:relative;inset:auto;aspect-ratio:1304/1280;height:auto;max-width:420px;margin:0 auto}
  .lo-tabs{position:static;display:flex;flex-direction:column;margin-top:14px;pointer-events:auto;border-top:1px solid var(--papel-fio)}
  .lo-tab{position:relative;right:auto;top:auto;transform:none;text-align:left;align-items:center;gap:14px;padding:12px 4px;border-bottom:1px solid var(--papel-fio);min-height:56px}
  .lo-tab-n{order:0;width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:50%;box-shadow:inset 0 0 0 1px var(--papel-fio);font-size:.7rem}
  .lo-tab-txt{gap:3px}
  .lo-tab[aria-selected="true"] .lo-tab-n{background:var(--tinta-papel);color:var(--papel);box-shadow:none}
  .lo-tab::after{content:"";margin-left:auto;width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);opacity:.4;flex:none}
  .lo-tab[aria-selected="true"]::after{opacity:1}
  .lo-f-num{font-size:6.5rem}
  .lo-mapa iframe{top:-60px;height:calc(100% + 60px)}
}
@media (max-width:420px){
  .lo-midia{gap:8px}
  .lo-leg{gap:8px}
  .lo-leg span::before{display:none}
  .lo-zap{width:100%;justify-content:center}
}

/* prévia: rótulo e ponto se acendem juntos */
.lo-ponto-aro,.lo-ponto-miolo{transform-box:fill-box;transform-origin:center;transition:transform .4s var(--curva), fill .4s}
.lo-ponto.lo-hover .lo-ponto-aro{transform:scale(1.45)}
.lo-fio.lo-hover{stroke-opacity:.7}
.lo-tab.lo-hover .lo-tab-nome{color:var(--tinta-papel)}
.lo-tab:focus-visible{outline:2px solid var(--azul-bordado);outline-offset:2px;border-radius:6px}
