/* Baloo 2 + Patrick Hand servidas do proprio site.
   Motivo 1 (o que doia): na IMPRESSAO o Chrome headless nao espera fonte de
   rede alheia; a folha saia medida e desenhada com a fonte de reserva do
   sistema — outra largura, outro encaixe, outro visual.
   Motivo 2: o app offline (PWA) tambem passa a ter a letra certa.
   Motivo 3: sem Google Fonts nao ha IP de visitante indo para terceiro
   (a mesma pendencia ja anotada para as paginas legais alemas).
   font-display: block em vez de swap — no papel nao existe "trocar depois". */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url(fonts/Baloo2-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url(fonts/Baloo2-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url(fonts/Baloo2-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url(fonts/Baloo2-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url(fonts/Baloo2-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url(fonts/Baloo2-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 800;
  font-display: block;
  src: url(fonts/Baloo2-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 800;
  font-display: block;
  src: url(fonts/Baloo2-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Patrick Hand';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(fonts/PatrickHand-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Patrick Hand';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(fonts/PatrickHand-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================================
   FMPoster — CSS do pôster ilustrado (visual aprovado). Arquivo IDÊNTICO em
   todas as matrizes. Todas as classes têm prefixo fmp- para não colidir com o
   CSS do app. As MEDIDAS são as do mapa-completo.html — não mexer.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Patrick+Hand&display=swap');

.fmp-stage,.fmp-stage *{box-sizing:border-box}
.fmp-stage{position:relative;width:720px;height:720px;background:var(--fmp-fundo);
  border-radius:16px;overflow:hidden;box-shadow:0 3px 14px rgba(0,0,0,.13);
  margin:0 auto;flex:0 0 auto}
.fmp-stage img{position:absolute;display:block;border:0}

.fmp-confetti{position:absolute;inset:0;z-index:0;pointer-events:none}
.fmp-confetti img{position:absolute}
svg.fmp-links{position:absolute;inset:0;width:720px;height:720px;z-index:1}

.fmp-fig{z-index:4}
.fmp-pe{left:-16px;top:12px;height:166px}
.fmp-pd{right:-12px;top:22px;height:158px}

.fmp-title{position:absolute;left:146px;top:12px;width:430px;height:78px;z-index:5;
  background:var(--fmp-cartucho);border:5px solid var(--fmp-traco);border-radius:20px;
  display:flex;align-items:center;justify-content:center}
.fmp-title span{font-family:'Baloo 2';font-weight:800;font-size:48px;letter-spacing:1px;
  color:var(--fmp-texto);line-height:1;white-space:nowrap;transform-origin:center;
  text-align:center}

.fmp-core{position:absolute;left:242px;top:272px;width:236px;height:192px;z-index:5;
  background:var(--fmp-oval);border:5px solid var(--fmp-traco);border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.fmp-core b{font-family:'Baloo 2';font-weight:800;font-size:31px;line-height:1.0;
  color:var(--fmp-texto);text-align:center;text-transform:uppercase;letter-spacing:.5px;
  white-space:nowrap;transform-origin:center}
.fmp-core img.fmp-flag{position:static;width:58px;margin-top:8px;border-radius:3px;
  box-shadow:0 1px 3px rgba(0,0,0,.3)}

.fmp-card{position:absolute;z-index:5;border:5px solid var(--fmp-b);
  background:var(--fmp-f);border-radius:22px;padding:15px 18px;
  display:flex;align-items:center;gap:12px;box-shadow:0 2px 0 rgba(0,0,0,.07)}
.fmp-card img.fmp-ic{position:static;width:64px;height:64px;flex:0 0 auto}
/* bandeira do Twemoji: SVG retangular (4:3). Sem object-fit ela esticaria
   ate 64x64 e ficaria deformada. O contorno imita o traco dos desenhos. */
.fmp-card img.fmp-ic-tw{object-fit:contain;
  filter:drop-shadow(0 0 1.6px rgba(0,0,0,.6))}
.fmp-card .fmp-tx{min-width:0;overflow:hidden}
.fmp-card .fmp-term{font-family:'Baloo 2';font-weight:700;font-size:31px;
  line-height:1.02;color:var(--fmp-t);white-space:nowrap;transform-origin:left center}
.fmp-card .fmp-gl{font-family:'Patrick Hand';font-size:22px;color:#4a453d;
  line-height:1.12;margin-top:1px;white-space:nowrap;transform-origin:left center}
.fmp-card.fmp-mini img.fmp-ic{width:52px;height:52px}
.fmp-card.fmp-mini .fmp-term{font-size:28px}
.fmp-card.fmp-mini .fmp-gl{font-size:20px}
.fmp-card.fmp-mini{padding:13px 14px;gap:10px}

.fmp-c1{--fmp-b:var(--fmp-b1);--fmp-f:var(--fmp-f1);--fmp-t:var(--fmp-t1)}
.fmp-c2{--fmp-b:var(--fmp-b2);--fmp-f:var(--fmp-f2);--fmp-t:var(--fmp-t2)}
.fmp-c3{--fmp-b:var(--fmp-b3);--fmp-f:var(--fmp-f3);--fmp-t:var(--fmp-t3)}
.fmp-c4{--fmp-b:var(--fmp-b4);--fmp-f:var(--fmp-f4);--fmp-t:var(--fmp-t4)}
.fmp-c5{--fmp-b:var(--fmp-b5);--fmp-f:var(--fmp-f5);--fmp-t:var(--fmp-t5)}
.fmp-c6{--fmp-b:var(--fmp-b6);--fmp-f:var(--fmp-f6);--fmp-t:var(--fmp-t6)}
.fmp-c7{--fmp-b:var(--fmp-b7);--fmp-f:var(--fmp-f7);--fmp-t:var(--fmp-t7)}
.fmp-c8{--fmp-b:var(--fmp-b8);--fmp-f:var(--fmp-f8);--fmp-t:var(--fmp-t8)}
.fmp-c9{--fmp-b:var(--fmp-b9);--fmp-f:var(--fmp-f9);--fmp-t:var(--fmp-t9)}
.fmp-c10{--fmp-b:var(--fmp-b10);--fmp-f:var(--fmp-f10);--fmp-t:var(--fmp-t10)}
.fmp-c11{--fmp-b:var(--fmp-b11);--fmp-f:var(--fmp-f11);--fmp-t:var(--fmp-t11)}
.fmp-c12{--fmp-b:var(--fmp-b12);--fmp-f:var(--fmp-f12);--fmp-t:var(--fmp-t12)}
/* 9+ palavras: sem monumento (nao sobra o vao central de baixo) */
.fmp-stage.fmp-n9 .fmp-emb,.fmp-stage.fmp-n10 .fmp-emb,
.fmp-stage.fmp-n11 .fmp-emb,.fmp-stage.fmp-n12 .fmp-emb{display:none}

.fmp-emb{bottom:80px;z-index:3;left:50%;transform:translateX(-50%);
  max-height:150px;max-width:240px;height:auto;width:auto}
.fmp-stage.fmp-n8 .fmp-emb{max-height:96px;max-width:170px;left:24px;transform:none}

.fmp-ribbon{position:absolute;left:56px;bottom:14px;width:614px;height:60px;z-index:6;
  background:var(--fmp-traco);border-radius:9px;display:flex;align-items:center;
  justify-content:center;gap:11px;box-shadow:0 3px 0 rgba(0,0,0,.16)}
.fmp-ribbon span{font-family:'Baloo 2';font-weight:700;font-size:27px;
  color:var(--fmp-fxt);white-space:nowrap;transform-origin:center}
.fmp-ribbon img{position:static;width:30px;height:30px}
.fmp-ribbon::before,.fmp-ribbon::after{content:'';position:absolute;top:9px;
  width:26px;height:38px;background:var(--fmp-traco);z-index:-1}
.fmp-ribbon::before{left:-19px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,32% 50%)}
.fmp-ribbon::after{right:-19px;clip-path:polygon(0 0,100% 0,68% 50%,100% 100%,0 100%)}

/* exemplos e sub-itens abaixo do poster (nada de conteudo pago escondido) */
/* RETO, sem a inclinacao de caderno (11/08). O bloco herda a classe .tipnote,
   que vem com transform:rotate(-.8deg) — charmoso num post-it curto, ruim aqui:
   agora que as frases aparecem na primeira tela, sao 8 a 16 linhas seguidas, e
   inclinado o texto todo desce em rampa. Mesma decisao que a folha impressa ja'
   tinha tomado (ver .fmp-folha .fmp-extras, que tambem faz transform:none).
   A fita adesiva de cima continua torta de proposito — e' ela que sustenta a
   ideia de papel colado; quem tinha de ficar reto e' o papel. */
.fmp-extras{margin-top:14px;transform:none}
.fmp-extras .fmp-extra{padding:7px 0;border-bottom:1px dashed rgba(0,0,0,.12)}
.fmp-extras .fmp-extra:last-child{border-bottom:0}
.fmp-extras .fmp-ex{margin:3px 0 0 6px}
.fmp-extras .fmp-ex-gl{opacity:.75;font-size:.92em}
.fmp-extras .fmp-kids{margin:4px 0 0 6px;display:flex;flex-wrap:wrap;gap:6px 14px}
.fmp-extras .fmp-kid{white-space:nowrap}

/* a palavra clicavel (audio): DESTAQUE reforcado (Daniel, 28/07 — "o icone
   do som podia ter mais contraste"). Sublinhado pontilhado mais visivel +
   selo redondo colorido com o alto-falante, na cor do cartao. */
.fmp-stage .sayterm,.fmp-extras .sayterm{cursor:pointer;
  text-decoration:underline dotted 2px;text-underline-offset:3px}
.fmp-stage .saymark,.fmp-extras .saymark{
  font-size:.60em;vertical-align:middle;margin-left:4px;line-height:1;
  display:inline-block;padding:3px 5px;border-radius:999px;
  background:var(--fmp-b,var(--fmp-traco,#1b2a6b));color:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.28)}
.fmp-core .saymark{background:var(--fmp-traco,#1b2a6b)}

/* ============================================================================
   A FOLHA IMPRESSA (03/08)
   Ate aqui o papel nao conhecia o poster: printMapHTML cuspia caixas de texto
   com o emoji cru e o cliente recebia algo PIOR do que ve na tela. Agora a
   folha e o proprio poster ilustrado.
   A arte e fechada em 720x720: tem de caber INTEIRA, como ja vale no celular
   (ver zreset no app.js). Numa A4 com margem de 8mm sobram 733px de largura,
   entao o palco entra em tamanho natural. Na ALTURA e que aperta: sobram ~342px
   para exemplos + sub-itens + dica + rodape, e um mapa de 12 ramos passa disso.
   Quem resolve e o ajuste de escala em JS (FMPoster.ajustaFolhas), que mede a
   folha montada e encolhe o conjunto so quando precisa. Sem ele, o excedente
   viraria uma segunda folha carregando meia linha de texto — o mesmo defeito
   que ja tinha dobrado a tiragem antes.
   ========================================================================== */
.fmp-folha{background:#fff;margin:0 auto 26px;width:720px;overflow:hidden}
.fmp-folha-in{width:720px;transform-origin:top center}
.fmp-folha:last-child{margin-bottom:0}
.fmp-folha .fmp-stage{box-shadow:none}
/* Na tela os exemplos vem dentro do post-it amarelo (.tipnote: torto, estreito,
   com fita adesiva). No papel isso brigava com a caixa da dica logo abaixo —
   dois amarelos colados, e o post-it ainda desperdicava a largura da folha.
   Aqui a lista volta a ser lista; o amarelo fica so' para a dica. */
.fmp-folha .fmp-extras{max-width:none;margin:12px 0 0;padding:9px 2px 0;
  background:none;border:0;border-top:2px solid rgba(0,0,0,.16);border-radius:0;
  transform:none;box-shadow:none;
  font-family:'Patrick Hand';font-size:17px;color:#2c2a26;line-height:1.32}
.fmp-folha .fmp-extras::before{display:none}
.fmp-folha .fmp-extras .fmp-extra{padding:4px 0}
.fmp-folha .fmp-extras b{font-family:'Baloo 2';font-weight:700}
.fmp-dica{margin-top:9px;padding:8px 11px;border-radius:9px;
  background:#fff8dd;border:2px solid #f0cf5a;
  font-family:'Patrick Hand';font-size:17px;color:#4a3f14;line-height:1.3}
.fmp-rodape{margin-top:9px;text-align:center;font-family:'Patrick Hand';
  font-size:13px;color:#8a857c}

@page{size:A4 portrait;margin:8mm}
@media print{
  /* A folha ja' vem MEDIDA para encher a A4 util (ajustaFolhas encolhe ate
     A4_UTIL=1058px, e a util com margem de 8mm e' ~1062px: sobram 4px).
     Entao qualquer espaco em volta a empurra para fora e sai uma SEGUNDA
     folha carregando so' o rodape.
     E' o que acontecia no botao "baixar" do app, que imprime DENTRO do #app
     — e o #app tem padding:18px 16px 80px. 18+1058 = 1076 > 1062.
     O exportador em massa nunca viu isso porque monta o HTML sem o #app;
     por isso o defeito so' aparecia no caminho do cliente. */
  #app{padding:0!important;max-width:none!important}
  .printsheet{margin:0!important;padding:0!important}
  .fmp-folha{page-break-after:always;break-after:page;
    page-break-inside:avoid;break-inside:avoid;margin:0 auto}
  .fmp-folha:last-child{page-break-after:auto;break-after:auto}
  /* o navegador as vezes descarta fundo/cor ao imprimir; aqui a cor E o produto */
  .fmp-folha,.fmp-folha *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}