/* Componentes ilustrados dos posts: figuras interativas (js/math-figures.js), fotos, linha do tempo,
   ficha, caixas de curiosidade e deduções passo a passo. Carregado só nas páginas que usam os shortcodes. */
:root {
  --mf-night: #140b2b; --mf-night2: #2b1a52; --mf-gold: #f4b740; --mf-gold2: #e0931b; --mf-teal: #1f7f9e;
  --mf-ink: #1c2541; --mf-muted: #5b6478; --mf-line: #e3e6ef; --mf-violet: #6c4ab6; --mf-red: #d64545;
}

/* ---------- revelar ao rolar ---------- */
.mf-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.mf-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .mf-reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- figura interativa ---------- */
.mf {
  margin: 2rem 0;
  padding: 1rem 1rem 0.75rem;
  background: #fff;
  border: 1px solid var(--mf-line);
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(28, 37, 65, 0.08);
}
.mf figcaption {
  margin-top: 0.75rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--mf-line);
  font-size: 0.9rem;
  color: var(--mf-muted);
  text-align: center;
}
.mf-svg { display: block; width: 100%; height: auto; fill: var(--mf-ink); font-family: inherit; touch-action: manipulation; }
.mf-noscript { color: var(--mf-muted); font-style: italic; }

.mf-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.75rem; }
.mf-btn {
  border: 1px solid var(--mf-line);
  background: #f7f5fc;
  color: var(--mf-ink);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.mf-btn:hover { border-color: var(--mf-gold); transform: translateY(-1px); }
.mf-btn.is-active, .mf-btn--primary { background: var(--mf-night2); border-color: var(--mf-night2); color: #fff; }
.mf-slider { display: flex; align-items: center; gap: 0.6rem; flex: 1 1 260px; margin: 0; font-size: 0.88rem; font-weight: 700; color: var(--mf-ink); }
.mf-slider input { flex: 1; accent-color: var(--mf-gold2); -webkit-appearance: none; appearance: none; height: 6px; border-radius: 6px; background: #e3e6ef; border: 0; padding: 0; outline: none; }
.mf-slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--mf-gold); border: 3px solid var(--mf-night2); cursor: pointer; }
.mf-slider input::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--mf-gold); border: 3px solid var(--mf-night2); cursor: pointer; }
.mf-slider input::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--mf-gold2); }
.mf-slider__value { min-width: 3rem; text-align: right; font-variant-numeric: tabular-nums; color: var(--mf-gold2); }
.mf-readout {
  margin-top: 0.6rem;
  padding: 0.6rem 0.9rem;
  border-radius: 12px;
  background: #f7f5fc;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--mf-ink);
  min-height: 2.6rem;
}
.mf-hint { color: var(--mf-muted); font-size: 0.82rem; }
.mf-wow { display: inline-block; margin-left: 0.3rem; padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--mf-gold); color: var(--mf-night); font-weight: 800; animation: mf-pop 0.4s ease; }
.mf-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1.2rem; margin: 0.6rem 0 0; padding: 0 0 0 1.1rem; font-size: 0.85rem; color: var(--mf-muted); }

/* textos e traços dentro dos SVGs (a cor padrão vem de .mf-svg por herança, para os atributos fill valerem) */
.mf-label { font-size: 14px; font-weight: 700; }
.mf-strong { font-size: 17px; font-weight: 800; }
.mf-tick { font-size: 12px; opacity: 0.75; }
.mf-gold { fill: var(--mf-gold2); color: var(--mf-gold2); }
.mf-teal { fill: var(--mf-teal); color: var(--mf-teal); }
.mf-red { fill: var(--mf-red); }
.mf-sea { font-size: 13px; font-style: italic; fill: #6f8fa8; letter-spacing: 0.04em; }
.mf-node-text { font-size: 13px; font-weight: 800; }
.mf-badge-text { font-size: 12px; font-weight: 800; fill: #fff; }
.mf-noclick { pointer-events: none; }
.mf-grid line { stroke: #edf0f5; stroke-width: 1; }
.mf-axis line, .mf-axisline { stroke: #9aa3b5; stroke-width: 1.5; }
.mf-curve { fill: none; stroke: var(--mf-teal); stroke-width: 3; stroke-linejoin: round; }
.mf-curve--gold { stroke: var(--mf-gold2); }
.mf-leg { stroke: var(--mf-teal); stroke-width: 2; stroke-dasharray: 6 5; }
.mf-target { stroke: var(--mf-gold2); stroke-width: 2; stroke-dasharray: 7 6; }
.mf-route { fill: none; stroke: var(--mf-gold2); stroke-width: 3.5; stroke-linecap: round; }
.mf-edge { fill: none; stroke: var(--mf-teal); stroke-width: 4; stroke-linecap: round; }
.mf-arrow { fill: none; stroke: var(--mf-violet); stroke-width: 2.5; }
.mf-bar { fill: var(--mf-teal); transition: fill 0.2s, opacity 0.2s; }
.mf-bar.is-dim { fill: #cfd6e2; }
.mf-hit { fill: var(--mf-gold); stroke: var(--mf-ink); stroke-width: 2; animation: mf-beat 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.mf-handle { cursor: grab; touch-action: none; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.25)); }
.mf-handle:active { cursor: grabbing; }
.mf-rotatable { cursor: grab; touch-action: none; }
.mf-face { stroke: var(--mf-ink); stroke-width: 1.6; stroke-linejoin: round; fill: var(--mf-gold); }
.mf-face.is-pent { fill: var(--mf-ink); }
.mf-face.is-hex { fill: #ffffff; }

/* animações */
.mf-pulse { fill: rgba(244, 183, 64, 0.35); transform-box: fill-box; transform-origin: center; animation: mf-pulse 2.2s ease-out infinite; }
.mf-pop { opacity: 0; transform: scale(0.6); transform-box: fill-box; transform-origin: center; transition: opacity 0.35s ease, transform 0.35s cubic-bezier(.2,1.6,.4,1); }
.mf-pop.is-on { opacity: 1; transform: none; }
.mf-beat { transform-box: fill-box; transform-origin: center; animation: mf-beat 1.6s ease-in-out infinite; }
.mf-grow-y { transform: scaleY(0); transform-box: fill-box; transform-origin: bottom; transition: transform 0.6s ease, fill 0.2s; }
.is-on .mf-grow-y { transform: none; }
.mf-grow-x { transform: scaleX(0); transform-box: fill-box; transform-origin: left; transition: transform 0.9s ease; }
.is-on .mf-grow-x { transform: none; }
.mf-gasket { opacity: 0; transform: scale(0.2); transform-box: fill-box; transform-origin: center; stroke: var(--mf-ink); stroke-width: 0.8; transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.2,1.4,.4,1); }
.mf-gasket.is-on { opacity: 1; transform: none; }
.mf-gasket.is-outer { stroke-width: 2.5; }
.mf.is-special .mf-svg { filter: drop-shadow(0 0 10px rgba(244, 183, 64, 0.6)); }
@keyframes mf-pulse { 0% { transform: scale(0.5); opacity: 0.9; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes mf-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
@keyframes mf-pop { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mf-fade { from { opacity: 0; } to { opacity: 0.55; } }

/* Königsberg */
.mf-region { fill: transparent; cursor: pointer; transition: fill 0.2s; }
.mf-region:hover { fill: rgba(244, 183, 64, 0.18); }
.mf-bridge { cursor: pointer; }
.mf-bridge rect { fill: #8d6e63; stroke: #5d4037; stroke-width: 2; transition: fill 0.25s; }
.mf-bridge text { fill: #fff; font-weight: 800; font-size: 14px; pointer-events: none; }
.mf-bridge:hover rect { fill: #a1887f; }
.mf-bridge.is-used rect { fill: var(--mf-gold2); stroke: var(--mf-ink); }
.mf-walker { fill: var(--mf-red); stroke: #fff; stroke-width: 3; transition: transform 0.38s ease, opacity 0.3s; pointer-events: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35)); }

/* poliedros */
.mf-poly-info { margin-top: 0.5rem; text-align: center; font-size: 1rem; color: var(--mf-ink); }
.mf-vaf { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 0.4rem; }
.mf-vaf span { padding: 0.25rem 0.75rem; border-radius: 999px; background: #f7f5fc; font-weight: 800; font-variant-numeric: tabular-nums; }
.mf-vaf .mf-vaf__res { background: var(--mf-gold); color: var(--mf-night); }

/* regra dos sinais */
.mf-chips { display: grid; gap: 0.5rem; margin-bottom: 0.5rem; }
.mf-chiprow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.mf-chiprow__label { min-width: 3.4rem; font-weight: 800; color: var(--mf-ink); }
.mf-chip { padding: 0.2rem 0.6rem; border-radius: 8px; font-weight: 800; font-size: 0.95rem; animation: mf-pop 0.35s ease both; }
.mf-chip.is-pos { background: #e3f4ef; color: #1f7a6d; }
.mf-chip.is-neg { background: #fde8e8; color: #b23b3b; }
.mf-change { color: var(--mf-gold2); font-size: 1.2rem; font-weight: 800; animation: mf-beat 1.4s ease-in-out infinite; display: inline-block; }
.mf-chiprow__count { margin-left: auto; font-size: 0.85rem; font-weight: 800; color: var(--mf-gold2); }

/* ---------- fotos ---------- */
.mf-photo { margin: 1.75rem auto; max-width: 640px; text-align: center; }
.mf-photo img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(28, 37, 65, 0.18);
  cursor: zoom-in;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mf-photo img:hover { transform: scale(1.015) rotate(-0.3deg); box-shadow: 0 20px 44px rgba(28, 37, 65, 0.25); }
.mf-photo figcaption { margin-top: 0.6rem; font-size: 0.88rem; color: var(--mf-muted); line-height: 1.45; }
.mf-credit { display: block; margin-top: 0.15rem; font-size: 0.75rem; opacity: 0.8; }
/* blocos largos nunca ficam ao lado de uma foto flutuante; fotos flutuantes não se empilham lado a lado */
.mf, .mf-callout, .mf-steps, .mf-timeline, .mf-ficha, .mf-quote, .mf-photo--centro { clear: both; }
@media (min-width: 768px) {
  .mf-photo--direita, .mf-photo--esquerda { clear: both; }
  .mf-photo--direita { float: right; width: 42%; margin: 0.4rem 0 1rem 1.5rem; }
  .mf-photo--esquerda { float: left; width: 42%; margin: 0.4rem 1.5rem 1rem 0; }
  .mf-photo--retrato.mf-photo--direita, .mf-photo--retrato.mf-photo--esquerda { width: 32%; }
}
.post-content h2, .post-content h3 { clear: both; }
.mf-lightbox {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem;
  padding: 1rem; background: rgba(10, 6, 25, 0.9); cursor: zoom-out;
  opacity: 0; transition: opacity 0.25s ease;
}
.mf-lightbox.is-open { opacity: 1; }
.mf-lightbox img { max-width: 96vw; max-height: 84vh; border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
.mf-lightbox p { color: #e6e1f3; font-size: 0.9rem; max-width: 760px; text-align: center; }

/* ---------- ficha ---------- */
.mf-ficha {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 1.5rem;
  align-items: center;
  margin: 1.5rem 0 2rem;
  padding: 1.5rem;
  border-radius: 20px;
  color: #e6e1f3;
  background:
    radial-gradient(circle at 95% 0%, rgba(244, 183, 64, 0.35), transparent 45%),
    linear-gradient(120deg, var(--mf-night) 0%, var(--mf-night2) 100%);
  box-shadow: 0 18px 40px rgba(20, 11, 43, 0.35);
}
.mf-ficha img { width: 170px; height: 210px; object-fit: cover; border-radius: 14px; border: 3px solid var(--mf-gold); }
.mf-ficha__eyebrow { margin: 0; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mf-gold); }
.mf-ficha__name { margin: 0.1rem 0 0.75rem; font-size: 1.7rem; font-weight: 800; color: #fff; line-height: 1.15; }
.mf-ficha dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.5rem 1rem; margin: 0; }
.mf-ficha dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: #b9b1d0; font-weight: 700; }
.mf-ficha dd { margin: 0; font-weight: 700; color: #fff; font-size: 0.95rem; }
.mf-ficha__quote { margin: 0.9rem 0 0; font-family: Georgia, serif; font-style: italic; color: var(--mf-gold); font-size: 1.05rem; }
@media (max-width: 575px) {
  .mf-ficha { grid-template-columns: 1fr; text-align: center; }
  .mf-ficha img { margin: 0 auto; }
}

/* ---------- linha do tempo ---------- */
.mf-timeline { list-style: none; margin: 1.5rem 0 2rem; padding: 0 0 0 1.6rem; position: relative; }
.mf-timeline::before { content: ""; position: absolute; left: 0.45rem; top: 0.4rem; bottom: 0.4rem; width: 3px; border-radius: 3px; background: linear-gradient(var(--mf-gold), var(--mf-teal), var(--mf-violet)); }
.mf-timeline li { position: relative; display: flex; gap: 0.9rem; align-items: baseline; padding: 0.55rem 0.85rem; margin-bottom: 0.55rem; background: #fff; border: 1px solid var(--mf-line); border-radius: 12px; }
.mf-timeline li::before { content: ""; position: absolute; left: -1.45rem; top: 0.9rem; width: 15px; height: 15px; border-radius: 50%; background: var(--mf-gold); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--mf-gold2); }
.mf-timeline li:hover { border-color: var(--mf-gold); }
.mf-timeline__year { flex: none; min-width: 3.2rem; font-weight: 800; color: var(--mf-night2); font-variant-numeric: tabular-nums; }
.mf-timeline__text { color: #39415a; }
.mf-timeline__text p { margin: 0; }

/* ---------- caixas ---------- */
.mf-callout { display: flex; gap: 1rem; margin: 1.75rem 0; padding: 1.1rem 1.25rem; border-radius: 16px; background: #fff8e8; border: 1px solid #f6dfa6; }
.mf-callout__icon { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--mf-gold); color: var(--mf-night); font-size: 1.15rem; box-shadow: 0 6px 14px rgba(224, 147, 27, 0.35); }
.mf-callout__title { margin: 0 0 0.25rem; font-weight: 800; color: var(--mf-ink); }
.mf-callout__body p:last-child { margin-bottom: 0; }
.mf-callout--atencao { background: #eef7fb; border-color: #c4e3ef; }
.mf-callout--atencao .mf-callout__icon { background: var(--mf-teal); color: #fff; box-shadow: 0 6px 14px rgba(31, 127, 158, 0.3); }
.mf-callout--desafio { background: #f3effc; border-color: #d9cdf3; }
.mf-callout--desafio .mf-callout__icon { background: var(--mf-violet); color: #fff; box-shadow: 0 6px 14px rgba(108, 74, 182, 0.3); }

/* ---------- passos ---------- */
.mf-steps { margin: 1.75rem 0; padding: 1.1rem 1.25rem; border-radius: 16px; background: #fff; border: 1px solid var(--mf-line); border-left: 5px solid var(--mf-gold); }
.mf-steps__title { margin: 0 0 0.5rem; font-weight: 800; color: var(--mf-ink); }
.mf-steps li { margin-bottom: 0.45rem; transition: opacity 0.4s ease, transform 0.4s ease; }
.mf-steps li.is-hidden { display: none; }
.mf-steps li.is-new { animation: mf-step 0.5s ease; }
.mf-steps__bar { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.5rem; }
.mf-steps__count { font-size: 0.85rem; color: var(--mf-muted); }
@keyframes mf-step { from { opacity: 0; transform: translateX(-12px); background: #fff4dc; } to { opacity: 1; transform: none; } }

/* ---------- citação de abertura ---------- */
.post-content .mf-quote { border-left: 0; }
.mf-quote, .post-content .mf-quote { position: relative; margin: 1.5rem 0; padding: 1.4rem 1.5rem 1.4rem 4.6rem; border-radius: 18px; background: #f7f5fc; }
.mf-quote::before {
  content: "“"; position: absolute; left: 1.2rem; top: 1.3rem;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--mf-gold); color: var(--mf-night);
  font-family: Georgia, serif; font-size: 2.6rem; line-height: 3.3rem; text-align: center;
}
.mf-quote p { margin: 0; font-family: Georgia, serif; font-style: italic; font-size: 1.3rem; color: var(--mf-ink); }
.mf-quote cite { display: block; margin-top: 0.5rem; font-style: normal; font-weight: 700; color: var(--mf-gold2); }

/* ---------- créditos ---------- */
.mf-credits { font-size: 0.82rem; color: var(--mf-muted); }
.mf-credits li { margin-bottom: 0.25rem; }

/* no celular a figura encolhe junto com o SVG: textos maiores para continuarem legíveis */
@media (max-width: 575px) {
  .mf { padding: 0.75rem 0.6rem 0.6rem; margin-left: -0.25rem; margin-right: -0.25rem; }
  .mf-label { font-size: 18px; }
  .mf-strong { font-size: 21px; }
  .mf-tick { font-size: 15px; }
  .mf-node-text { font-size: 15px; }
  .mf-sea { font-size: 16px; }
  .mf-bridge text { font-size: 18px; }
  .mf-badge-text { font-size: 15px; }
  .mf-quote, .post-content .mf-quote { padding: 1.1rem 1rem 1.1rem 3.8rem; }
  .mf-quote::before { left: 0.8rem; top: 1.1rem; }
  .mf-quote p { font-size: 1.1rem; }
}

/* ---------- galeria ---------- */
.mf-gallery { clear: both; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; margin: 1.5rem 0 2rem; }
.mf-gallery .mf-photo { float: none; width: auto; margin: 0; }
.mf-gallery .mf-photo img { aspect-ratio: 4 / 3; object-fit: cover; }
.mf-gallery .mf-photo--retrato img, .mf-gallery img[src*="marin"], .mf-gallery img[src*="wallis"] { aspect-ratio: 3 / 4; }
.mf-gallery--retratos { grid-template-columns: repeat(auto-fit, minmax(140px, 180px)); justify-content: center; }
.mf-gallery--retratos .mf-photo img { aspect-ratio: 3 / 4; object-fit: contain; }

/* soma de Gauss: a cópia da escada entra deslizando */
.mf-slide-in { animation: mf-slide 0.5s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes mf-slide { from { opacity: 0; transform: translate(40px, -40px); } to { opacity: 1; transform: none; } }

/* noves-fora */
.mf-noves { padding: 0.5rem 0.25rem; }
.mf-noves__in { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; color: var(--mf-ink); }
.mf-noves__in input { flex: 1; max-width: 16rem; padding: 0.5rem 0.8rem; border: 2px solid var(--mf-line); border-radius: 10px; font-size: 1.3rem; font-weight: 800; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.mf-noves__in input:focus { outline: none; border-color: var(--mf-gold); }
.mf-noves__steps { display: grid; gap: 0.4rem; margin-top: 0.75rem; }
.mf-noves__row { padding: 0.45rem 0.8rem; border-radius: 10px; background: #fff8e8; font-size: 1.1rem; font-variant-numeric: tabular-nums; animation: mf-step 0.4s ease both; }

/* fórmulas em destaque não ficam espremidas ao lado de uma foto flutuante */
.post-content .katex-display { clear: both; }

/* ---------- treino com pontuação ---------- */
.mf-quiz { position: relative; overflow: hidden; padding: 1rem 1rem 1.25rem; border-radius: 16px; background: linear-gradient(135deg, #fff8e8, #eef6fb); text-align: center; }
.mf-quiz__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; font-size: 0.9rem; color: var(--mf-ink); }
.mf-quiz__stars { font-size: 1.2rem; letter-spacing: 0.1em; }
.mf-quiz__bar { height: 8px; margin: 0.75rem 0 1rem; border-radius: 8px; background: rgba(28, 37, 65, 0.1); overflow: hidden; }
.mf-quiz__bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--mf-gold2), var(--mf-gold)); transition: width 0.4s ease; }
.mf-quiz__q { font-size: clamp(2rem, 7vw, 3rem); font-weight: 800; color: var(--mf-night2); font-variant-numeric: tabular-nums; margin: 0.25rem 0 0.75rem; }
.mf-quiz__q.is-pop { animation: mf-pop 0.35s ease; }
.mf-quiz__blank { display: inline-block; min-width: 1.4em; border-bottom: 4px dashed var(--mf-gold2); color: var(--mf-gold2); }
.mf-quiz__form { display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; }
.mf-quiz__form input { width: 9rem; padding: 0.55rem 0.8rem; border: 3px solid var(--mf-line); border-radius: 12px; font-size: 1.5rem; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.mf-quiz__form input:focus { outline: none; border-color: var(--mf-gold); }
.mf-quiz__form .mf-btn { font-size: 1rem; padding: 0.6rem 1.3rem; }
.mf-quiz__fb { min-height: 1.6rem; margin-top: 0.75rem; font-size: 1.05rem; font-weight: 700; }
.mf-quiz__fb.is-ok { color: #1f7a6d; animation: mf-pop 0.3s ease; }
.mf-quiz__fb.is-no { color: #b23b3b; animation: mf-shake 0.35s ease; }
.mf-quiz__fb.is-end { color: var(--mf-ink); }
@keyframes mf-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.mf-confetti { position: absolute; inset: 0; pointer-events: none; }
.mf-confetti i { position: absolute; top: -10px; width: 9px; height: 14px; border-radius: 2px; animation: mf-fall 2.2s ease-in forwards; }
@keyframes mf-fall { to { top: 110%; transform: rotate(540deg); } }

/* ---------- sapo da reta numérica ---------- */
.mf-frog { transition: transform 0.35s cubic-bezier(.3,1.6,.5,1); }

/* ---------- algarismos romanos ---------- */
.mf-roman { text-align: center; padding: 0.5rem; }
.mf-roman__big { font-size: clamp(1.6rem, 5vw, 2.4rem); color: var(--mf-ink); }
.mf-roman__big b { font-family: Georgia, serif; letter-spacing: 0.08em; color: var(--mf-night2); }
.mf-roman__big i { color: var(--mf-gold2); font-size: 0.7em; margin: 0 0.4rem; }
.mf-roman__chips { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.35rem; margin-top: 0.75rem; }
.mf-roman__chip { display: inline-flex; flex-direction: column; align-items: center; padding: 0.35rem 0.6rem; border-radius: 10px; background: #fff4dc; border: 1px solid #f6dfa6; animation: mf-pop 0.35s ease both; }
.mf-roman__chip b { font-family: Georgia, serif; font-size: 1.3rem; color: var(--mf-night2); }
.mf-roman__chip small { font-size: 0.75rem; color: var(--mf-muted); }
.mf-roman__plus { color: var(--mf-muted); font-weight: 800; }

/* ---------- crivo de Eratóstenes ---------- */
.mf-sieve { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; max-width: 460px; margin: 0 auto; }
.mf-sieve__cell {
  position: relative; aspect-ratio: 1; display: grid; place-items: center; border-radius: 8px; background: #f2f0f8;
  font-weight: 800; font-size: clamp(0.7rem, 2.6vw, 0.95rem); color: var(--mf-ink); transition: background 0.25s, color 0.25s, transform 0.25s;
}
.mf-sieve__cell.is-one { background: #e3e6ef; color: #9aa1b2; }
.mf-sieve__cell.is-out { background: #fff; color: #c3c8d4; }
.mf-sieve__cell.is-out::after { content: ""; position: absolute; left: 18%; right: 18%; top: 50%; height: 3px; border-radius: 3px; background: var(--x, #d64545); transform: rotate(-35deg); animation: mf-pop 0.25s ease; }
.mf-sieve__cell.is-prime { background: var(--mf-gold); color: var(--mf-night); transform: scale(1.06); box-shadow: 0 4px 10px rgba(224, 147, 27, 0.35); }

/* Coleções do Fundamental I: alvos grandes para toque e teclado. */
.mf-counting-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
  gap: 12px;
  max-width: 560px;
  margin: 20px auto;
}
.mf-counting-grid .mf-btn {
  min-width: 56px;
  min-height: 56px;
  border-radius: 18px;
  font-size: 30px;
  color: #087f8c;
  background: #e5f6f2;
  border: 2px solid #087f8c;
}
.mf-counting-grid .mf-btn.is-active {
  color: #fff;
  background: #087f8c;
}
.mf-counting-grid .mf-btn:focus-visible {
  outline: 3px solid #7146b8;
  outline-offset: 4px;
}

/* Fluxos de leitura e tabelas dos laboratórios de inteiros. */
.int-flow { margin: 1.5rem 0; padding: 1rem; background: #f2f6fd; border: 1px solid #d5dfed; border-radius: 18px; }
.int-flow__title { font-weight: 700; color: #24324b; }
.int-flow ol { display: flex; flex-wrap: wrap; gap: 1.25rem; padding-left: 1.4rem; }
.int-flow li { position: relative; flex: 1 1 160px; padding: .8rem; border-radius: 12px; background: #fff; border-bottom: 3px solid #087f8c; }
.int-flow li:not(:last-child)::after { content: "→"; position: absolute; right: -1.1rem; top: 35%; color: #7146b8; font-weight: bold; }
.int-lab-table { width: 100%; max-width: 420px; margin: 1rem auto; border-collapse: collapse; }
.int-lab-table caption { caption-side: top; color: #24324b; text-align: center; }
.int-lab-table th, .int-lab-table td { padding: .35rem .75rem; border: 1px solid #d5dfed; text-align: center; }
.int-lab-table .is-selected { background: #fff0d4; color: #24324b; font-weight: 700; }
@media (max-width: 576px) { .int-flow ol { display: block; } .int-flow li { margin-bottom: 1.25rem; } .int-flow li:not(:last-child)::after { content: "↓"; top: auto; right: 50%; bottom: -1.3rem; } }

/* Nitidez dos diagramas de inteiros: SVG e proporção natural. */
.int-diagram { margin: 1.5rem auto; max-width: 900px; }
.int-diagram img { display: block; width: 100%; max-width: 900px; height: auto; margin: 0 auto; }
.int-diagram figcaption { margin: .75rem 0; text-align: center; color: #24324b; }
.int-diagram__zoom summary { cursor: pointer; padding: .6rem; color: #24324b; font-weight: 600; }
.int-diagram__viewport { overflow-x: auto; background: #fff; border: 1px solid #d5dfed; border-radius: 12px; }
.int-diagram__viewport img { width: 900px; min-width: 900px; max-width: none; height: auto; }
.mf[data-fig^="inteiros-"] .mf-stage { overflow-x: auto; }
.mf[data-fig^="inteiros-"] .mf-svg { min-width: 600px; }
.int-figure-hint { margin: .75rem 0; font-size: .9rem; color: #24324b; }
.int-diagram__viewport:focus-visible, .mf[data-fig^="inteiros-"] .mf-stage:focus-visible { outline: 3px solid #6035a0; outline-offset: 3px; }
@media (min-width: 768px) { .int-figure-hint { display: none; } }

/* ---------- mapa de viagens (shortcode viagem) ---------- */
.mf-viagem__mapa { display: none; height: 380px; border-radius: 12px; overflow: hidden; border: 1px solid var(--mf-line); z-index: 0; }
.mf-viagem.is-ready .mf-viagem__mapa { display: block; }
@media (max-width: 600px) { .mf-viagem__mapa { height: 300px; } }
.mf-viagem__painel { display: none; margin-top: 0.75rem; padding: 0.7rem 0.9rem; border-left: 4px solid var(--mf-gold); background: #fbf8f0; border-radius: 0 10px 10px 0; min-height: 5.5rem; }
.mf-viagem.is-ready .mf-viagem__painel { display: block; }
.mf-viagem__ano { font-weight: 800; color: var(--mf-gold2); font-variant-numeric: tabular-nums; }
.mf-viagem__lugar { font-weight: 700; color: var(--mf-ink); font-size: 1.05rem; }
.mf-viagem__texto { color: var(--mf-ink); font-size: 0.95rem; }
.mf-viagem__texto p { margin: 0.2rem 0 0; }
.mf-viagem__controles { display: none; }
.mf-viagem.is-ready .mf-viagem__controles { display: flex; }
.mf-viagem__contador { margin-left: auto; font-size: 0.85rem; color: var(--mf-muted); font-variant-numeric: tabular-nums; }
.mf-viagem__lista { margin: 0.9rem 0 0; padding-left: 1.4rem; font-size: 0.92rem; }
.mf-viagem__lista li { margin: 0.25rem 0; }
.mf-viagem__item { border: 0; background: none; padding: 0; text-align: left; color: var(--mf-ink); cursor: pointer; font: inherit; }
.mf-viagem__item:hover strong, .mf-viagem__item.is-current strong { color: var(--mf-teal); text-decoration: underline; }
.mf-viagem__item-ano { color: var(--mf-muted); font-variant-numeric: tabular-nums; }
.mf-viagem__item-texto { color: var(--mf-muted); font-size: 0.88rem; }
.mf-viagem__item-texto p { margin: 0; }
.mf-viagem.is-ready .mf-viagem__item-texto { display: none; }
.mf-viagem__fonte { display: block; font-size: 0.75rem; margin-top: 0.2rem; }
.mf-viagem__pin { background: none; border: 0; }
.mf-viagem__pin span { display: inline-block; transform: translate(-50%, -50%); min-width: 26px; height: 26px; padding: 0 6px; line-height: 22px; text-align: center; border-radius: 13px; background: var(--mf-night2); color: #fff; font: 700 12px/22px sans-serif; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.35); white-space: nowrap; }
.mf-viagem__pin.is-current span { background: var(--mf-gold2); transform: translate(-50%, -50%) scale(1.25); }

/* ---------- figuras interativas (shortcode interativo) ---------- */
.mf-int__tabela { overflow-x: auto; margin: 0.4rem 0; }
.mf-tab { border-collapse: collapse; margin: 0 auto; font-variant-numeric: tabular-nums; font-size: 0.92rem; }
.mf-tab th, .mf-tab td { border: 1px solid var(--mf-line); padding: 0.28rem 0.5rem; text-align: center; min-width: 2rem; }
.mf-tab th { background: #f7f5fc; color: var(--mf-ink); }
.mf-tab td.is-one { background: var(--mf-gold); font-weight: 800; color: var(--mf-night); }
.mf-tab td.is-zero { color: var(--mf-red); }
.mf-tab td.is-sub { box-shadow: inset 0 0 0 2px var(--mf-teal); }
.mf-tab td.is-eq { background: #fde9b8; font-weight: 800; }
.mf-tab tr.is-bad th, .mf-tab tr.is-bad td { background: #fbe3e3; }
.mf-tab--jogo td { min-width: 7rem; }
.mf-tab--jogo input { width: 3.2rem; text-align: center; border: 1px solid var(--mf-line); border-radius: 6px; padding: 0.1rem; font: inherit; }
.mf-arrows { color: var(--mf-red); font-weight: 800; min-height: 1.1rem; }
.mf-int__perms { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: center; margin: 0.5rem 0; }
.mf-perm { font: 700 0.85rem/1 monospace; padding: 0.35rem 0.45rem; border-radius: 6px; color: #fff; }
.mf-perm--0 { background: #1f7f9e; } .mf-perm--1 { background: #e0931b; } .mf-perm--2 { background: #6c4ab6; } .mf-perm--3 { background: #d64545; }
.mf-perm--4 { background: #2f9e6b; } .mf-perm--5 { background: #3b6fd4; } .mf-perm--6 { background: #b04ac2; } .mf-perm--7 { background: #8a6d1f; }
.mf-perm--8 { background: #2b1a52; } .mf-perm--9 { background: #4f7f2a; } .mf-perm--10 { background: #a33a5c; } .mf-perm--11 { background: #5b6478; }
.mf-int__crivo { display: flex; flex-wrap: wrap; gap: 3px; margin: 0.4rem 0; }
.mf-num { width: 2.2rem; text-align: center; font-size: 0.78rem; padding: 0.2rem 0; border-radius: 5px; background: #f2f3f7; color: #a0a7b6; font-variant-numeric: tabular-nums; }
.mf-num.is-prime { background: #dbeef4; color: var(--mf-teal); font-weight: 700; }
.mf-num.is-sg { background: var(--mf-gold); color: var(--mf-night); font-weight: 800; }
.mf-num.is-safe { outline: 2px solid var(--mf-gold2); }
.mf-tab--prog td, .mf-tab--prog th { min-width: 1.6rem; padding: 0.2rem 0.3rem; font-size: 0.78rem; }
.mf-tab th.is-one { background: var(--mf-gold); }
.mf-tab th.is-eq { background: #fde9b8; }
.mf-int__formula { text-align: center; font: 600 1.7rem/1.6 "Times New Roman", serif; margin: 0.8rem 0; }
.mf-int__fletter { font-style: italic; font-weight: 800; }
.mf-int__fsign { color: var(--mf-ink); }