/* página inicial: frase, resumo e constelação cabem na primeira tela, sem rolar */
.capa{display:flex;flex-direction:column;height:100vh;height:100svh;min-height:600px;max-height:940px}
.palco{flex:1;min-height:0;display:grid;grid-template-columns:minmax(320px,480px) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"intro mapa" "apoio mapa";column-gap:56px;padding:28px 0 24px}
.intro{grid-area:intro}
.apoio{grid-area:apoio;min-height:0;display:flex;flex-direction:column}
h1{font-weight:500;font-size:clamp(2.2rem,min(4.2vw,7.6vh),3.9rem);line-height:1.03;letter-spacing:-.04em;margin:0 0 22px;text-wrap:balance}
h1 em{font-style:normal;color:var(--roxo)}
.resumo{font-size:clamp(15px,2.45vh,17px)}
.resumo p{margin:0 0 .8em;text-wrap:pretty}
.seguir{display:inline-block;margin-top:6px;font-size:15px;font-weight:500;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.seguir:hover{color:var(--roxo)}

/* constelação */
.mapa{grid-area:mapa;position:relative;min-height:0;container-type:size}
.mapa.pre{visibility:hidden}
.linhas{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.linhas path{fill:none;stroke:var(--tinta);stroke-opacity:.16;stroke-width:1;transition:stroke-opacity .3s,stroke .3s}
.linhas circle{fill:none;stroke:var(--tinta);stroke-opacity:.09}
.linhas path.previa{stroke-opacity:.6}
.linhas path.rel{stroke:var(--roxo);stroke-opacity:.32}
.linhas path.on{stroke:var(--roxo);stroke-opacity:.9;stroke-width:1.4}
.linhas path.pulso{stroke-dasharray:1.02 1;animation:tracar .6s cubic-bezier(.3,.7,.2,1)}
.mapa.tem-sel .linhas path:not(.on):not(.rel):not(.previa){stroke-opacity:.05}
.mapa.demo.tem-sel .linhas path:not(.on):not(.rel):not(.previa){stroke-opacity:.1}

.no{position:absolute;padding:0;border:0;background:none;cursor:pointer;transform:translate(-50%,-50%);transition:opacity .3s}
.no::before{content:"";position:absolute;inset:-11px;border-radius:50%}
.no:focus-visible{outline:none}
.no:focus-visible .ponto{outline:2px solid var(--roxo);outline-offset:4px}
.ponto{display:block;width:100%;height:100%;border-radius:50%;transition:background .2s,border-color .2s,transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s}
.rot{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);width:max-content;text-align:center;background:var(--fundo);border-radius:6px;padding:1px 6px;transition:opacity .25s,color .2s}

.no.area{width:16px;height:16px;z-index:2}
.no.area .ponto{background:var(--tinta)}
.no.area .rot{max-width:158px;font-size:14.5px;font-weight:600;line-height:1.2;letter-spacing:-.01em}
.no.area sup{font-size:10.5px;font-weight:400;color:var(--suave);margin-left:3px;vertical-align:top;line-height:1.5}

.no.trabalho{width:10px;height:10px;z-index:1}
.no.trabalho .ponto{background:var(--fundo);border:1.5px solid var(--tinta)}
.no.trabalho.em-breve .ponto{border-style:dashed}
.no.trabalho .rot{max-width:128px;font-size:12.5px;font-weight:500;line-height:1.2;opacity:0;pointer-events:none}
.no.trabalho:hover .rot,.no.trabalho:focus-visible .rot,.no.trabalho.on .rot,.no.trabalho.sel .rot{opacity:1}
.no.trabalho.on,.no.trabalho.sel{z-index:3}
.no:hover{z-index:5}
.no:hover .ponto{transform:scale(1.35)}
.no.pop .ponto{animation:pop .5s ease-out}

/* mapa estreito ou baixo: rótulos um pouco menores */
@container (max-width:760px){
  .no.area .rot{font-size:13.5px;max-width:140px}
  .no.trabalho .rot{font-size:12px;max-width:118px}
}
@container (max-height:560px){
  .no.area .rot{font-size:13.5px;max-width:140px}
  .no.trabalho .rot{font-size:12px;max-width:118px}
}

.mapa.tem-sel .no:not(.sel):not(.on):not(.rel){opacity:.22}
.mapa.demo.tem-sel .no:not(.sel):not(.on):not(.rel){opacity:.45}
.mapa.tem-sel .no:hover{opacity:1}
.no.area.sel .ponto{background:var(--rosa);box-shadow:0 0 0 6px rgba(255,74,107,.18)}
.no.area.on .ponto{background:var(--roxo);box-shadow:0 0 0 6px rgba(59,47,147,.14)}
.no.area.on .rot{color:var(--roxo)}
.no.trabalho.on .ponto{background:var(--roxo);border-color:var(--roxo);border-style:solid}
.no.trabalho.sel .ponto{background:var(--rosa);border-color:var(--rosa);border-style:solid;box-shadow:0 0 0 6px rgba(255,74,107,.18)}
.no.trabalho.sel .rot{font-weight:600}

/* entrada: as áreas brotam, as linhas se desenham até cada trabalho */
.mapa.intro .no .ponto{animation:brotar .6s cubic-bezier(.34,1.56,.64,1) both;animation-delay:var(--d,0ms)}
.mapa.intro .no.area .rot{animation:subir .5s ease-out both;animation-delay:calc(var(--d,0ms) + 140ms)}
.mapa.intro .linhas path{stroke-dasharray:1.02 1;animation:tracar .9s cubic-bezier(.3,.7,.2,1) both;animation-delay:var(--d,0ms)}
.mapa.intro .linhas circle{animation:surgir .7s both;animation-delay:var(--d,0ms)}
@keyframes brotar{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes subir{from{opacity:0;transform:translate(-50%,7px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes tracar{from{stroke-dashoffset:1.02}to{stroke-dashoffset:0}}
@keyframes surgir{from{opacity:0}}
@keyframes pop{40%{transform:scale(1.8)}}

/* atalhos por área (telas pequenas) */
.atalhos{display:none;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.atalho{border:1px solid var(--fio);background:none;border-radius:999px;padding:8px 14px;font-size:14.5px;font-weight:500;cursor:pointer;line-height:1.2}
.atalho small{color:var(--suave);font-size:12px;margin-left:4px}
.atalho[aria-pressed="true"]{background:var(--tinta);border-color:var(--tinta);color:var(--fundo)}
.atalho[aria-pressed="true"] small{color:rgba(255,255,255,.7)}

/* painel: a prévia da área ou do trabalho aparece no lugar do resumo */
.painel{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
.painel:empty{display:none}
.painel > *{animation:surgir .35s both}
.voltar{border:0;background:none;padding:0 0 12px;font-size:14px;font-weight:500;color:var(--roxo);cursor:pointer}
.voltar:hover{text-decoration:underline;text-underline-offset:3px}
.painel .rotulo{margin-bottom:4px}
.painel__titulo{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;text-decoration:none}
.painel__titulo h2{font-weight:500;font-size:1.7rem;line-height:1.1;letter-spacing:-.035em;margin:0}
.painel__titulo span{font-size:14px;font-weight:500;color:var(--roxo);white-space:nowrap}
.painel__titulo:hover h2{color:var(--roxo)}
.painel__titulo:hover span{text-decoration:underline;text-underline-offset:3px}
.painel__sub{margin:4px 0 0;color:var(--suave);font-size:15px}
.lista{list-style:none;margin:10px 0 0;padding:0}
.linha{display:block;border-bottom:1px solid var(--fio);padding:8px 0;text-decoration:none}
.linha strong{display:block;font-weight:600;font-size:15px;line-height:1.3;letter-spacing:-.01em}
.linha span{display:block;font-size:12.5px;color:var(--suave);line-height:1.3;margin-top:1px}
a.linha:hover strong{color:var(--roxo)}
.detalhe{margin-top:12px}
.detalhe p{margin:0 0 8px;font-size:15.5px}
.detalhe .papel{color:var(--suave)}
.painel .etiquetas{margin:14px 0 0}

.rodape{margin-top:0}

/* ao explorar, a coluna da esquerda troca o resumo pela prévia, que ganha a altura toda */
@media (min-width:1024px){
  .palco.com-sel .intro{display:none}
}
@media (max-width:1199px){
  .palco{grid-template-columns:minmax(280px,330px) minmax(0,1fr);column-gap:40px}
  .resumo{font-size:15px}
}
@media (max-width:1023px){
  .capa{height:auto;min-height:0;max-height:none}
  .palco{grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"intro" "mapa" "apoio";row-gap:28px;padding-bottom:48px}
  h1{font-size:clamp(2.4rem,8vw,4.2rem);max-width:15ch}
  .resumo{font-size:17px;max-width:62ch}
  .mapa{aspect-ratio:1/1}
  .painel{overflow:visible}
}
@media (max-width:759px){
  .palco{grid-template-areas:"intro" "apoio";row-gap:24px}
  .mapa{display:none}
  .atalhos{display:flex}
}