/* ============ 03 · Territórios — "Mapa vivo" ============ */
.territorios {
  position: relative;
  background: var(--noite);
  color: var(--bege);
  z-index: 1;
}
.tr-margem {
  position: absolute; left: 0; right: 0; top: 1px;
  height: 18vh;
  transform: translateY(-100%);
  pointer-events: none;
  z-index: 2;
}
.tr-margem svg { width: 100%; height: 100%; }
.tr-margem path { fill: var(--noite); }

.tr-palco {
  position: relative;
  height: 100vh; height: 100svh;
  min-height: 640px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(300px, 34vw) 1fr;
  align-items: center;
  padding: 0 calc(var(--margem) + 60px) 0 var(--margem);
  gap: 3vw;
  background:
    radial-gradient(ellipse at 66% 50%, rgba(36, 74, 50, .55), transparent 62%),
    radial-gradient(ellipse at 10% 100%, rgba(183, 104, 67, .12), transparent 50%),
    var(--noite);
}
.tr-texto { position: relative; z-index: 3; }
.tr-titulo {
  font-size: clamp(34px, 4.2vw, 76px);
  --soft: 100;
}
.tr-titulo em { color: var(--ouro); }
.tr-titulo .letra { display: inline-block; }
.tr-desc { color: rgba(243, 239, 229, .74); max-width: 30em; margin: 1.8em 0; }
.tr-legenda {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  color: rgba(243, 239, 229, .6);
  line-height: 2;
  padding-left: 22px; position: relative;
}
.tr-leg-ponto {
  position: absolute; left: 0; top: 7px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--ouro); box-shadow: 0 0 10px 2px rgba(216, 167, 99, .55);
}
.tr-coord {
  margin-top: 2.6em;
  font: 500 12px/1 var(--sans); letter-spacing: .24em; font-variant-numeric: tabular-nums;
  color: var(--ouro);
  opacity: .8;
}

.tr-mapa {
  position: relative;
  height: min(86vh, 900px);
  display: flex; align-items: center; justify-content: center;
  perspective: 1600px;
}
.tr-svg {
  width: auto; height: 100%; max-width: 100%;
  overflow: visible;
  transform-origin: 50% 70%;
}

/* camadas do mapa */
.tr-grade line { stroke: rgba(243, 239, 229, .1); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tr-grade text { fill: rgba(243, 239, 229, .35); font: 600 11px var(--sans); letter-spacing: .12em; }
.tr-equador line { stroke: var(--terracota); stroke-width: 1.4; stroke-dasharray: 2 6; vector-effect: non-scaling-stroke; }
.tr-equador text { fill: var(--terracota); font: 700 12px var(--sans); letter-spacing: .22em; text-transform: uppercase; }
.tr-mun path {
  fill: var(--amazonia);
  fill-opacity: 0;
  stroke: rgba(243, 239, 229, .32);
  stroke-width: .8;
  vector-effect: non-scaling-stroke;
  transition: fill .45s, fill-opacity .45s;
}
.tr-mun path.ativo { fill: var(--ouro); fill-opacity: .28 !important; }
.tr-estado {
  fill: none;
  stroke: var(--ouro-reflexo);
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 6px rgba(242, 200, 138, .5));
}
.tr-cipos path {
  fill: none; stroke: var(--ouro); stroke-width: 1.1; stroke-linecap: round;
  vector-effect: non-scaling-stroke; opacity: .7;
}
.tr-cipos .tr-folhinha { fill: var(--ouro); opacity: .8; }

.tr-marcador { cursor: pointer; outline: none; }
.tr-marcador .alvo { fill: transparent; }
.tr-marcador .halo { fill: var(--ouro); opacity: .18; transform-box: fill-box; transform-origin: center; animation: halo 3.2s ease-out infinite; }
.tr-marcador .nucleo { fill: var(--ouro-reflexo); stroke: var(--noite); stroke-width: 2; vector-effect: non-scaling-stroke; transition: transform .35s var(--ease-org); transform-box: fill-box; transform-origin: center; }
.tr-marcador .rotulo-mun {
  fill: var(--bege); font: 600 13px var(--sans); letter-spacing: .06em;
  opacity: 0; transition: opacity .3s;
  paint-order: stroke; stroke: var(--noite); stroke-width: 4px; stroke-linejoin: round;
}
.tr-marcador:hover .nucleo, .tr-marcador:focus-visible .nucleo, .tr-marcador.ativo .nucleo { transform: scale(1.6); }
.tr-marcador:hover .rotulo-mun, .tr-marcador:focus-visible .rotulo-mun, .tr-marcador.ativo .rotulo-mun { opacity: 1; }
.tr-marcador:focus-visible .nucleo { stroke: var(--bege); }
@keyframes halo {
  0% { transform: scale(.6); opacity: .45; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* Ficha do município */
.tr-ficha {
  position: absolute;
  min-width: 210px;
  padding: 16px 18px 14px;
  background: rgba(8, 21, 14, .86);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(216, 167, 99, .45);
  border-radius: 2px 18px 2px 18px;
  pointer-events: none;
  z-index: 5;
  transform: translate(-50%, calc(-100% - 22px));
}
.tr-ficha p { margin: 0; }
.tr-ficha-rotulo { font: 700 9px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--ouro); margin-bottom: 8px !important; }
.tr-ficha-nome { font-family: var(--serif); font-size: 26px; line-height: 1.05; font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1; margin-bottom: 2px !important; }

@media (max-width: 860px) {
  .tr-palco {
    height: auto; min-height: 0;
    grid-template-columns: 1fr;
    padding: 90px 20px 60px;
    gap: 20px;
  }
  .tr-titulo { font-size: clamp(32px, 9.4vw, 54px); }
  .tr-mapa { height: auto; }
  .tr-svg { width: 100%; height: auto; }
  .tr-coord { display: none; }
  .tr-ficha {
    position: fixed; left: 12px !important; right: 12px; bottom: 12px; top: auto !important;
    transform: none;
  }
}