@font-face {
  font-display: swap;
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/nunito-v32-latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/nunito-v32-latin-600.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/nunito-v32-latin-700.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/barlow-v13-latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/barlow-v13-latin-600.woff2') format('woff2');
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  font-family: 'Nunito', sans-serif;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

.ecra {
  position: relative;
  display: grid;
  grid-template-columns: 420px 1080px 420px;
  grid-template-rows: 120px 860px 100px;
  grid-template-areas:
    "topo   topo   topo"
    "esq    mapa   dir"
    "rodape rodape rodape";
  width: 1920px;
  height: 1080px;
  background: #fff;
  color: #58595B;
}

/* Topo */
.topo {
  grid-area: topo;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 64px;
}

.topo img {
  justify-self: start;
}

.topo h1 {
  margin: 0;
  font-size: 40px;
  font-weight: 700;
  color: #000;
}

/* Botões */
.botoes--esq { grid-area: esq; }
.botoes--dir { grid-area: dir; }
.botoes { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 0 48px; }
.botoes button {
  height: 76px;
  border: 2px solid #000;
  border-radius: 38px;
  background: #fff;
  font: 600 24px 'Nunito', sans-serif;
  color: #000;
  cursor: pointer;
}
.botoes button.ativo { background: #E3087D; border-color: #E3087D; color: #fff; }

/* Mapa */
.mapa { grid-area: mapa; display: flex; align-items: center; justify-content: center; padding: 40px; background: #1F73B8; }
.mapa svg { width: 100%; height: 100%; }
.mapa g.concelho {cursor: pointer;}
.mapa g.concelho.ativo [id^="geog"] path {fill: #E3087D !important;}

/* Rodapé */
.rodape {
  grid-area: rodape;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 64px;
}

.rodape__prr {
  display: flex;
  align-items: center;
  gap: 32px;
}

/* Popup */
.popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 760px;
  padding: 64px;
  border-radius: 24px;
  background: #fff;
}
.popup__fechar {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 72px;
  height: 72px;
  border: 0;
  border-radius: 50%;
  background: #000;
  color: #fff;
  font-size: 40px;
  line-height: 1;
}
.popup__marca { margin: 0 0 8px; font: 600 20px 'Barlow', sans-serif; color: #1F73B8; }
.popup h2 { margin: 0 0 40px; font-size: 64px; line-height: 1; font-weight: 700; color: #000; }
.popup__numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 40px; }
.popup__numeros strong { display: block; font-size: 96px; line-height: 1; font-weight: 700; color: #E3087D; }
.popup__numeros div + div strong { color: #1F73B8; }
.popup__numeros span { font-size: 24px; }
.popup__locais { margin: 0; font-size: 24px; line-height: 1.4; }
.popup__locais b { display: block; color: #000; }

/* CÍRCULOS OPACOS, sem transparência*/
.mapa [id^="btn_transp"] path {
  fill: #808285 !important;
  fill-opacity: 1 !important;
}

/* POPUP transição*/
.popup:not([hidden]) {
  animation: popup-entrar 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes popup-entrar {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.popup__nota {
  display: block;
  margin-top: 8px;
  font-size: 18px;
  line-height: 1.3;
  color: #58595B;
}