p {
  font-size: 16px;
  line-height: 1.15;
}
h3 {
  font-family: 'Transcript Medium';
  font-size: 24px;
  margin-bottom: 20px;
  line-height: 1.1;
}


.intro,
.contexto,
.participantes,
.ficha {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 25;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.intro.ativa,
.contexto.ativa,
.participantes.ativa,
.ficha.ativa {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.intro {
  background-color: var(--marrom);
  display: flex;
  align-items: flex-end;
}

.intro-content {
  width: 100%;
  height: auto;
  background-color: var(--azul-claro);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--medida) var(--medida) calc(var(--medida) + var(--footer));
}
.intro-content div {
  width: 480px;
  color: var(--marrom);
}
.intro-content img {
  top: 0;
  left: var(--medida);
  transform: translateY(-23%);
  width: 40vw;
}
.intro-content .btn-vermapa {
  background-color: var(--marrom);
  color: var(--branco);
  font-family: 'Tijolo Medium';
  font-size: 20px;
  border-radius: 100px;
  padding: 8px 12px;
  width: fit-content;
  line-height: 1;
  filter: brightness(95%);
  transition: all 0.5s ease;
}
.intro-content .btn-vermapa:hover {
  filter: brightness(110%);
  transform: translateY(-2px);
  cursor: pointer;
}


.contexto,
.participantes,
.ficha {
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--branco);
  overflow-y: hidden;
  padding-top: var(--footer);
  padding-bottom: var(--footer);
}
.contexto div,
.participantes div,
.ficha div {
  width: 480px;
  max-height: 90%;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s;
}
.contexto.ativa div,
.participantes.ativa div,
.ficha.ativa div {
  opacity: 1;
  transform: translateY(0);
}



.mapa-wrapper {
  position: fixed;
  inset: 0;
  top: 50px;
  width: 100%;
  height: calc(100% - 50px - 70px); /* medidas do header e do footer */
  background-color: var(--azul-claro);
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  color: var(--marrom);
  padding: var(--footer) var(--medida);
  gap: 100px;
}
.mapa-cover {
  position: absolute;
  z-index:15;
  opacity: 1;
  visibility: visible;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(110, 3, 1, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  pointer-events: auto;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.mapa-wrapper.mapa-ativo {
  z-index: 999;
}
.mapa-wrapper.mapa-ativo .mapa-cover {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.qrcode {
  position: absolute;
  bottom: var(--footer);
  left: var(--medida);
  width: 60px;
  margin: 16px;

}


.eixos {
  width: 350px;
  margin-top: 0px;
  height: calc(100vh - 240px);
  padding: 10px;
  overflow: hidden;
}
.eixos > div.relative {
  overflow-y: auto;
}
.eixos h3 {
  font-family: 'Tijolo Medium';
  text-transform: uppercase;
  font-size: 14px;
  position: relative;
  line-height: 2;
  margin: 0;
}
.eixos .mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1pt solid var(--marrom);
  border-radius: 50%;
  margin-right: 6px;
  padding: 2px;
  box-sizing: border-box;
  background-color: transparent;
}

.eixos .mark div {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  margin: 0;
}
.eixo-item {
  margin-left: 20px;
}



.eixo-descricao {
  background-color: var(--branco);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  position: relative;
  max-height: 8em;
  overflow: hidden;
  line-height: 1.6;
  transition: max-height 0.4s ease, opacity 0.3s ease;
}
.eixo-descricao p {
  font-size: 14px;
  margin-bottom: 0;
}
.eixo-descricao span.tijolo::before {
  content: '';
  display: inline-block;
  margin-right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 10px;
  background-color: var(--cor-eixo);
}
.eixo-descricao::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4em;
  background: linear-gradient(to bottom, rgba(250, 241, 235, 0) 0%, rgba(250, 241, 235, 0.9) 75%, rgba(250, 241, 235, 1) 100%);
  cursor: pointer;
  pointer-events: auto;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.eixo-descricao.expandido {
  max-height: 300px;
  cursor: default;
}

.eixo-descricao.expandido::after {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.eixo-descricao.inativo {
  opacity: 0.5;
  filter: blur(3px);
}
.eixos.filtrando .eixo-item:not(.ativo) {
  opacity: 0.4;
  transition: opacity 0.3s ease;
}




.mapa-container {
  position: relative;
  aspect-ratio: 1059/897;
  width: auto;
  height: 75vh;
  margin: auto 0;
}

.mapa-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.personagem-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 2;
  cursor: pointer;
  width: 7vh;
  height: 7vh;
  border-radius: 100px;
  filter: brightness(99%);
  transition: all 0.5s ease;
}
.personagem-pin img {
  border-radius: 100%;
}
.personagem-pin:hover {
  width: 8vh;
  height: 8vh;
  filter: brightness(110%);
}

.personagem-box {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -38%);
  width: 240px;
  height: 400px;
  border-radius: 16px;
  background-color: rgba(244, 225, 211, 0.6);
  backdrop-filter: blur(10px);
  padding: 16px;
  z-index: 9;
}
.personagem-box.visible {
  pointer-events: auto;
  opacity: 1;
  transform: translate(-50%, -40%);
  transition: all 0.5s ease;
}
.personagem-box img {
  aspect-ratio: 1/1;
  border-radius: 100%;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.personagem-box .fecha {
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 2;
  cursor: pointer;
  width: 20px;
  height: 20px;
  padding: 5px;
}
.personagem-box h4 {
  font-size: 22px;
  line-height: 1;
  margin-top: 12px;
}
.personagem-box audio {
  width: 100%!important;
}
.btn-ouvir {
  margin: 10px 0px 16px;
  display: flex;
  height: 28px;
  border-radius: 24px;
  font-size: 16px;
  line-height: 1;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 0px 8px;
  filter: brightness(95%);
  transition: all 0.3s ease;
}
.btn-ouvir:hover {
  transform: translateY(-2px);
  filter: brightness(110%);
}
.personagem-box a svg {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 48px;
  height: 48px;
  filter: brightness(98%);
  transition: all 0.5s ease;
}
.personagem-box a svg:hover {
  filter: brightness(110%);
  transform: translateY(-3px);
}



/* filtros eixos */

.eixo-item {
  transition: opacity 0.3s ease;
}
.eixos.filtrando .eixo-item {
  opacity: 0.8;
}
.eixos.filtrando .eixo-item:not(.ativo) .mark {
  background: transparent !important;
}
.eixos.filtrando .eixo-item.ativo {
  opacity: 1;
}
.personagem {
  transition: opacity 0.4s ease;
}
.personagem.inativo {
  opacity: 0;
  pointer-events: none;
}



.btn-ver-todos {
  padding-left: 20px;
  cursor: pointer;
  opacity: 0;
  padding-bottom: 20px;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}
.eixos.filtrando .btn-ver-todos {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* posicao dos pins */

.pos-1  { left: 65.5%; top: 7%; }
.pos-2  { left: 72.5%; top: 8%; }
.pos-3  { left: 60.5%;   top: 14%; }
.pos-4  { left: 68%;   top: 15%; }
.pos-5  { left: 75.5%; top: 16%; }
.pos-6  { left: 83.5%;   top: 15%; }

.pos-7  { left: 87%; top: 32%; }
.pos-8  { left: 94.5%; top: 27.5%; }

.pos-9  { left: 49.5%; top: 22.5%; }
.pos-10 { left: 58%; top: 29.5%; }

.pos-11 { left: 14.5%; top: 77.5%; }
.pos-12 { left: 21.5%; top: 81%; }
.pos-13 { left: 29%;   top: 78%; }
.pos-14 { left: 40.5%; top: 77%; }

.pos-15 { left: 90.5%; top: 90.5%; }

.pos-16 { left: 18.5%; top: 61.5%; }
.pos-17 { left: 25.5%; top: 54.5%; }
.pos-18 { left: 29.5%; top: 63%; }
.pos-19 { left: 39%;   top: 56%; }

.pos-20 { left: 53.5%; top: 60%; }
.pos-21 { left: 61.5%; top: 71%; }
.pos-22 { left: 65.5%; top: 63.5%; }
.pos-23 { left: 72.5%; top: 57.5%; }
.pos-24 { left: 84.5%; top: 66%; }
.pos-25 { left: 87%;   top: 52%; }

.pos-26 { left: 40.5%; top: 40%; }
.pos-27 { left: 46.5%;   top: 46%; }
.pos-28 { left: 54%;   top: 48%; }
.pos-29 { left: 61%;   top: 50%; }
.pos-30 { left: 68%;   top: 46.5%; }
.pos-31 { left: 75.5%;   top: 48.5%; }
.pos-32 { left: 80.5%; top: 42.5%; }
.pos-33 { left: 74%;   top: 39%; }
.pos-34 { left: 67%;   top: 37%; }
.pos-35 { left: 60%;   top: 39.5%; }
.pos-36 { left: 53%;   top: 38%; }