/* ============================================================
   INFOGRÁFICO INTERATIVO MÓRI — FOLHA DE ESTILO DO TEMPLATE
   ------------------------------------------------------------
   PARA TROCAR AS CORES DO TEMA, edite APENAS o bloco :root
   abaixo. Nenhuma cor é usada fora dessas variáveis.
   ============================================================ */

:root {
  /* ---- PALETA DO TEMA (edite aqui) ---- */
  --cor-primaria:        #4527A0;  /* azul escuro: título, navbar, texto de destaque   */
  --cor-primaria-escura: #32197D;  /* versão escura da primária (hover, botão fechar)  */
  --cor-destaque:        #BF360C;  /* laranja: marca, pill, caixa de fechamento        */
  --cor-secundaria:      #00695C;  /* teal: barra de título do mapa                    */
  --cor-kw-1:            #BF360C;  /* palavra-chave 1 */
  --cor-kw-2:            #4527A0;  /* palavra-chave 2 */
  --cor-kw-3:            #00695C;  /* palavra-chave 3 */

  /* ---- NEUTROS (raramente mudam) ---- */
  --cor-fundo:           #F6F4F0;
  --cor-cartao:          #FFFFFF;
  --cor-texto:           #2B2B2B;
  --cor-borda:           #9D9D9C;

  /* ---- HOTSPOT ---- */
  --cor-hotspot-fundo:   var(--cor-destaque); /* preenchimento do marcador          */
  --cor-hotspot-icone:   #FFFFFF;             /* ícone "+" dentro do marcador       */
  --hotspot-tamanho:     44px;     /* nunca abaixo de 44px (alvo de toque acessível) */

  /* ---- TIPOGRAFIA ---- */
  --fonte-titulo: 'TT Milks', 'Trebuchet MS', Arial, sans-serif;
  --fonte-corpo:  'Proxima Soft', 'Segoe UI', Arial, sans-serif;
  --fonte-negrito:'Proxima Soft', 'Segoe UI', Arial, sans-serif;
}

/* ---- Fontes da casa ---- */
@font-face { font-family:'TT Milks';     src:url('fonts/TTMilks.woff') format('woff'), url('fonts/TTMilks.otf') format('opentype'); font-display:swap; }
@font-face { font-family:'Proxima Soft'; src:url('fonts/ProximaSoft.woff2') format('woff2'), url('fonts/ProximaSoft.woff') format('woff'); font-display:swap; }

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 100%; }

body {
  margin: 0;
  font-family: var(--fonte-corpo);
  font-size: 1.125rem;                 /* 18px */
  line-height: 1.5;
  color: var(--cor-texto);
  background-color: var(--cor-fundo);
  /* bolhas decorativas sutis, como no layout de referência */
  background-image:
    radial-gradient(circle 90px at 8% 18%,  rgba(0,0,0,0.025) 0 90px, transparent 91px),
    radial-gradient(circle 60px at 94% 42%, rgba(0,0,0,0.025) 0 60px, transparent 61px),
    radial-gradient(circle 110px at 10% 82%, rgba(0,0,0,0.02) 0 110px, transparent 111px),
    radial-gradient(circle 70px at 90% 90%, rgba(0,0,0,0.025) 0 70px, transparent 71px);
}

strong, b { font-family: var(--fonte-negrito); font-weight: bold; }

img { max-width: 100%; height: auto; }

/* Só visível para leitores de tela */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Link "pular para o conteúdo" — aparece ao receber foco */
.pular {
  position: absolute;
  left: 50%; top: 0;
  transform: translate(-50%, -110%);
  background: var(--cor-primaria);
  color: #fff;
  padding: 0.5rem 1.25rem;
  border-radius: 0 0 12px 12px;
  text-decoration: none;
  z-index: 50;
  transition: transform 0.15s ease;
}
.pular:focus { transform: translate(-50%, 0); outline: 3px solid var(--cor-destaque); }

/* Foco visível padronizado em tudo que é interativo */
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--cor-destaque);
  outline-offset: 2px;
}

/* ============================================================
   PÁGINA
   ============================================================ */
.pagina {
  max-width: 880px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 2.5rem;
}

/* ---- Cabeçalho: marca + barra de título ---- */
.cabecalho {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.marca { flex: 0 0 auto; width: 56px; }
.marca svg { display: block; width: 100%; height: auto; }

.titlebar {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 3px solid var(--cor-primaria);
  border-radius: 999px;
  padding: 0.4rem 1.4rem;
  background: var(--cor-cartao);
}
.titlebar h1 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.15rem, 3.5vw, 1.6rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cor-primaria);
}
.titlebar .subtitulo {
  display: block;
  font-family: var(--fonte-corpo);
  font-size: 1.1rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--cor-texto);
}
.titlebar::after {
  content: "";
  margin-left: auto;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--cor-primaria);
  flex: 0 0 auto;
}

/* ---- Abertura ---- */
.abertura {
  max-width: 620px;
  margin: 0 auto 1.75rem;
  text-align: center;
}

/* Destaque tipo pílula (ex.: "Pangeia" no layout de referência) */
.pill {
  display: inline-block;
  background: var(--cor-destaque);
  color: #fff;
  font-family: var(--fonte-negrito);
  border-radius: 999px;
  padding: 0.05em 0.7em;
  line-height: 1.35;
}

/* ============================================================
   CARD DO MAPA
   ============================================================ */
.mapa-card {
  margin: 0 0 0.75rem;
  background: var(--cor-cartao);
  border-radius: 22px;
  padding: 1rem;
  box-shadow: 0 6px 22px rgba(0,0,0,0.10);
}

.mapa-titulo {
  background: var(--cor-secundaria);
  color: #fff;
  border-radius: 999px;
  padding: 0.45rem 1.2rem;
  text-align: center;
  margin: 0 auto 1rem;
  max-width: 92%;
}
.mapa-titulo h2 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: clamp(1rem, 2.8vw, 1.25rem);
  font-weight: normal;
}

/* A área do mapa recorta o zoom; o alvo do zoom carrega imagem + hotspots */
.mapa-area {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  touch-action: pan-y;         /* JS assume os gestos quando com zoom */
}
.mapa-area.zoomado { cursor: grab; touch-action: none; }
.mapa-area.arrastando { cursor: grabbing; }

.mapa-zoom {
  position: relative;
  transform-origin: center center;
}
.mapa-zoom > img { display: block; width: 100%; }

@media (prefers-reduced-motion: no-preference) {
  .mapa-zoom { transition: transform 0.2s ease; }
  .mapa-zoom.sem-transicao { transition: none; }
}

/* ---- Hotspot: botão real, posicionado em %, acompanha o zoom ----
   Marcador de interação: círculo na cor de destaque com ícone "+"
   e anel que pulsa continuamente sinalizando "clique aqui".        */
.hotspot {
  position: absolute;
  left: var(--x, 50%);
  top:  var(--y, 50%);
  transform: translate(-50%, -50%);
  width: var(--hotspot-tamanho);
  height: var(--hotspot-tamanho);
  border-radius: 50%;
  border: 3px solid #fff;
  background: var(--cor-hotspot-fundo);
  color: var(--cor-hotspot-icone);
  box-shadow: 0 2px 10px rgba(0,0,0,0.40);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.hotspot svg { width: 58%; height: 58%; }

/* Anel pulsante ("clique aqui") */
.hotspot::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 3px solid var(--cor-hotspot-fundo);
  opacity: 0.85;
  pointer-events: none;
}
@keyframes hotspot-pulso {
  0%   { transform: scale(0.75); opacity: 0.85; }
  70%  { transform: scale(1.65); opacity: 0; }
  100% { transform: scale(1.65); opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .hotspot::before { animation: hotspot-pulso 2s ease-out infinite; }
  .hotspot { transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease; }
  .hotspot:hover, .hotspot:focus-visible { transform: translate(-50%, -50%) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  /* Sem animação: anel estático mantém a pista visual de interatividade */
  .hotspot::before { transform: scale(1.3); opacity: 0.5; }
}
.hotspot:hover, .hotspot:focus-visible {
  background: var(--cor-primaria);
}

/* ---- Legenda do mapa ---- */
.legenda {
  text-align: center;
  font-size: 1rem;
  max-width: 640px;
  margin: 0 auto 1.75rem;
}

/* ============================================================
   FECHAMENTO + PALAVRAS-CHAVE
   ============================================================ */
.fechamento {
  background: var(--cor-destaque);
  border: 3px solid #fff;
  outline: 2px solid var(--cor-destaque);
  border-radius: 22px;
  color: #fff;
  text-align: center;
  max-width: 560px;
  margin: 0 auto 1.25rem;
  padding: 0.9rem 1.6rem;
}
.fechamento p { margin: 0; font-family: var(--fonte-negrito); }

.palavras-chave {
  text-align: center;
  margin: 0 0 2rem;
  font-family: var(--fonte-negrito);
}
.palavras-chave .kw-1 { color: var(--cor-kw-1); }
.palavras-chave .kw-2 { color: var(--cor-kw-2); }
.palavras-chave .kw-3 { color: var(--cor-kw-3); }
.palavras-chave .sep  { color: var(--cor-texto); margin: 0 0.5rem; }

/* ============================================================
   FONTES (rodapé)
   ============================================================ */
.fontes {
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--cor-texto);
  max-width: 720px;
  margin: 0 auto 1.5rem;
}
.fontes p { margin: 0 0 0.35rem; }
.fontes a { color: var(--cor-primaria); }

/* ============================================================
   NAVBAR (controles de zoom)
   ============================================================ */
.navbar {
  display: flex;
  justify-content: center;
}
.navbar-pilula {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  background: var(--cor-primaria);
  border-radius: 999px;
  padding: 0.35rem 1.5rem;
}
.navbar button {
  width: 44px; height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.navbar button:hover { background: var(--cor-primaria-escura); }
.navbar svg { width: 24px; height: 24px; }

/* ============================================================
   MODAIS (<dialog>)
   ============================================================ */
.modal {
  border: 0;
  border-radius: 0;
  padding: 1.4rem;
  background: var(--cor-cartao);
  max-width: min(600px, calc(100vw - 2rem));
  width: 100%;
  box-shadow: 0 10px 40px rgba(0,0,0,0.35);
}
.modal::backdrop { background: rgba(20, 20, 40, 0.55); }

.modal-cabecalho {
  position: relative;
  border: 1px solid var(--cor-borda);
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
  padding: 0.7rem 3rem 0.6rem 1.4rem;
}
.modal-cabecalho h2 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: 1.35rem;
  font-weight: normal;
  color: var(--cor-primaria);
  text-transform: uppercase;
}

.modal-fechar {
  position: absolute;
  top: -14px; right: -14px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: var(--cor-primaria-escura);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-fechar:hover { background: var(--cor-destaque); }

.modal-corpo {
  border: 1px solid var(--cor-borda);
  border-top: 0;
  border-radius: 0 0 26px 26px;
  padding: 1.1rem 1.4rem 1.4rem;
  max-height: min(65vh, 560px);
  overflow-y: auto;
}
.modal-corpo > :first-child { margin-top: 0; }
.modal-corpo > :last-child  { margin-bottom: 0; }
.modal-corpo ul { padding-left: 1.2rem; }
.modal-corpo li { margin-bottom: 0.3rem; }

.modal-figura { margin: 1rem 0 0; }
.modal-figura img { border-radius: 10px; display: block; }
.modal-figura figcaption {
  text-align: right;
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

/* ============================================================
   MODO DE EDIÇÃO (?editar) — painel para arrastar hotspots
   ============================================================ */
.editor-painel {
  position: fixed;
  right: 12px; bottom: 12px;
  z-index: 100;
  background: #fff;
  border: 2px solid var(--cor-primaria);
  borde
/* ---- Hotspot visitado (marcado durante a sessão) ---- */
.hotspot.visitado::before { animation: none; transform: scale(1.15); opacity: 0.45; }
.hotspot.visitado::after {
  content: "\2713";
  content: "\2713" / "";
  position: absolute; top: -8px; right: -8px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #1B8A3A; color: #fff; border: 2px solid #fff;
  font-size: 12px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
/* Pan com mouse: bloqueia o arrasto nativo da imagem do mapa */
[data-mapa] img { -webkit-user-drag: none; user-select: none; }