/* ═══════════════════════════════════════════════════════════════════════════
   Template "Magazine 2" (2026-09-28) — o Magazine original, melhorado.

   Mantém a identidade: escuro, verde #4ade80, partículas no destaque, Space Grotesk
   nos títulos, secções numeradas, "about.json" em janela de terminal, "Bora Falar.",
   e a barra de navegação e o rodapé do resto do site (nav.js, footer-loader.js).
   Muda o que custava: destaque compacto em vez de ecrã inteiro, texto corrido em
   Inter em vez de monoespaçado cinzento, 12 artigos no início com filtro por
   categoria, e o mesmo desenho no início, na lista e no artigo.

   Usa a paleta do main.css (--bg, --bg2, --bg3, --text, --text-dim, --border), por
   isso o tema claro/escuro da barra de navegação funciona sem mais nada.
   ═══════════════════════════════════════════════════════════════════════════ */
body.m2 {
  --acc: #4ade80; --acc-2: #22c55e; --acc-ink: #03140a; --acc-bg: rgba(74, 222, 128, .09); --acc-line: rgba(74, 222, 128, .28);
  --btn-bg: #166534; --btn-bg-h: #15803d; --btn-line: #22c55e; --btn-ink: #fff;   /* botão principal: verde escuro + texto branco (7:1); o verde claro com texto escuro ficava ilegível com o modo escuro forçado do browser */
  --soft: #b8b8b8; --card: var(--bg2); --line: var(--border); --line-2: rgba(255, 255, 255, .06);
  --f-head: 'Space Grotesk', system-ui, sans-serif; --f-body: 'Inter', system-ui, sans-serif; --f-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --r: 14px; --wrap: 1200px; --nav-h: 36px;   /* a barra do nav.js é fixa: 36 px (32 px em ecrãs estreitos) */
  background: var(--bg); color: var(--text); font-family: var(--f-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased;
  overflow-x: clip;   /* o main.css põe hidden, que desliga o position:sticky da barra da lista e do índice */
}
[data-theme="light"] body.m2 { --acc: #15803d; --acc-2: #166534; --acc-ink: #fff; --acc-bg: rgba(21, 128, 61, .08); --acc-line: rgba(21, 128, 61, .3); --btn-bg: #15803d; --btn-bg-h: #166534; --btn-line: #15803d; --soft: #4b5563; --line-2: rgba(0, 0, 0, .06); }
body.m2 ::selection { background: var(--acc-line); }
.m2 .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.m2-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
@media (max-width: 600px) { .m2-wrap { padding: 0 16px; } }
.m2 a { color: inherit; }   /* (0,1,1): ganha a .m2-btn sozinha; o botão usa .m2 .m2-btn */
.m2 img { max-width: 100%; display: block; }
.m2 :focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 4px; }

/* ── secções numeradas (a marca do original) ─────────────────────── */
.m2-sec { padding: 72px 0; border-top: 1px solid var(--line-2); }
.m2-sec-h { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; flex-wrap: wrap; }
.m2-sec-n { font: 500 12px var(--f-mono); color: var(--acc); letter-spacing: .08em; }
.m2-sec-h h2 { margin: 0; font: 600 13px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.m2-sec-h::after { content: ''; flex: 1; height: 1px; background: var(--line); min-width: 40px; order: 2; }
.m2-sec-h .m2-sec-a { order: 3; font: 500 12px var(--f-mono); color: var(--text-dim); text-decoration: none; letter-spacing: .04em; white-space: nowrap; }
.m2-sec-h .m2-sec-a:hover { color: var(--acc); }
.m2-big { font: 700 clamp(30px, 4vw, 46px)/1.08 var(--f-head); letter-spacing: -.025em; margin: 0 0 18px; }
.m2-big em { font-style: normal; color: var(--acc); }

/* ── etiquetas, pills, botões ────────────────────────────────────── */
.m2-pill { display: inline-flex; align-items: center; gap: 7px; font: 600 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--acc); background: var(--acc-bg); border: 1px solid var(--acc-line); padding: 7px 11px; border-radius: 999px; }
.m2-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; animation: m2-pulse 2s ease-in-out infinite; }
@keyframes m2-pulse { 50% { opacity: .35; } }
.m2-cat { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--c, var(--acc)); }
.m2-cat::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: currentColor; }
.m2-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font: 400 12px/1.4 var(--f-mono); color: var(--text-dim); }
.m2-meta b { color: var(--text); font-weight: 500; }
.m2-meta .dot { opacity: .45; }
.m2-eye { display: inline-flex; align-items: center; gap: 5px; }
.m2-eye svg { width: 14px; height: 14px; }
.m2 .m2-btn { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 var(--f-head); padding: 13px 20px; border-radius: 10px; border: 1px solid var(--btn-line); background: var(--btn-bg); color: var(--btn-ink); text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.m2-btn:hover { transform: translateY(-1px); background: var(--btn-bg-h); box-shadow: 0 8px 24px -8px var(--acc); }
.m2-btn.ghost { background: transparent; color: var(--text); border-color: var(--line); }
.m2-btn.ghost:hover { background: transparent; border-color: var(--acc); box-shadow: none; }
.m2-btn[disabled] { opacity: .4; cursor: default; transform: none; box-shadow: none; }
.m2-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.m2-tag { font: 400 11.5px/1 var(--f-mono); color: var(--text-dim); padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; }
.m2-tag:hover { color: var(--acc); border-color: var(--acc-line); }

/* ── destaque ────────────────────────────────────────────────────── */
.m2-hero { position: relative; overflow: hidden; padding: 64px 0 72px; }
.m2-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.m2-hero::after { content: ''; position: absolute; inset: auto 0 0; height: 120px; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
.m2-hero-g { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.m2-hero-t { margin: 18px 0 16px; font: 700 clamp(30px, 3.5vw, 46px)/1.08 var(--f-head); letter-spacing: -.03em; }
.m2-hero-t a { text-decoration: none; }
.m2-hero-t a:hover { color: var(--acc); }
.m2-hero-e { font-size: 18px; line-height: 1.6; color: var(--soft); margin: 0 0 20px; max-width: 58ch; }
.m2-hero-cta { display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; }
.m2-hero-img { display: block; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); box-shadow: 0 30px 80px -30px rgba(74, 222, 128, .28); aspect-ratio: 1200 / 630; background: var(--bg2); }
.m2-hero-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.m2-hero-img:hover img { transform: scale(1.025); }
@media (max-width: 900px) { .m2-hero { padding: 40px 0 48px; } .m2-hero-g { grid-template-columns: 1fr; gap: 28px; } .m2-hero-img { order: -1; } }

/* ── filtro por categoria ────────────────────────────────────────── */
.m2-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.m2-chip { font: 500 12.5px/1 var(--f-body); padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--soft); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.m2-chip i { width: 7px; height: 7px; border-radius: 2px; background: var(--c, var(--acc)); }
.m2-chip small { font: 500 11px var(--f-mono); color: var(--text-dim); }
.m2-chip:hover { color: var(--text); border-color: var(--text-dim); }
.m2-chip[aria-pressed="true"] { color: var(--text); border-color: var(--acc); background: var(--acc-bg); }

/* ── cartões ─────────────────────────────────────────────────────── */
.m2-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 1000px) { .m2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .m2-grid { grid-template-columns: 1fr; } }
.m2-card { position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; min-width: 0; }
.m2-card:hover { border-color: var(--acc-line); transform: translateY(-3px); box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .6); }
.m2-card-img { aspect-ratio: 1200 / 630; overflow: hidden; background: var(--bg3); border-bottom: 1px solid var(--line); }
.m2-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.m2-card:hover .m2-card-img img { transform: scale(1.04); }
.m2-card-b { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.m2-card h3 { margin: 0; font: 600 19px/1.28 var(--f-head); letter-spacing: -.012em; }
.m2-card h3 a { text-decoration: none; }
.m2-card h3 a::after { content: ''; position: absolute; inset: 0; }   /* o cartão inteiro é clicável */
.m2-card:hover h3 a { color: var(--acc); }
.m2-card p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--soft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.m2-card .m2-meta { margin-top: auto; padding-top: 6px; }
/* o primeiro cartão da grelha do início ocupa duas colunas, com a imagem ao lado */
@media (min-width: 1001px) {
  .m2-grid.m2-lead > .m2-card:first-child { grid-column: span 2; flex-direction: row; }
  .m2-grid.m2-lead > .m2-card:first-child .m2-card-img { flex: 1.15; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--line); }
  .m2-grid.m2-lead > .m2-card:first-child .m2-card-b { flex: 1; justify-content: center; padding: 26px 28px; }
  .m2-grid.m2-lead > .m2-card:first-child h3 { font-size: 25px; }
  .m2-grid.m2-lead > .m2-card:first-child .m2-meta { margin-top: 6px; }
}
.m2-empty { color: var(--text-dim); font: 400 14px var(--f-mono); padding: 30px 0; grid-column: 1 / -1; }
.m2-skel { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); min-height: 300px; animation: m2-pulse 1.4s ease-in-out infinite; }

/* ── mais lidos ──────────────────────────────────────────────────── */
.m2-rank { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 0 40px; }
@media (max-width: 500px) { .m2-rank { grid-template-columns: 1fr; } }
.m2-rank li { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line-2); }
.m2-rank-n { font: 600 22px var(--f-mono); color: var(--text-dim); opacity: .55; }
.m2-rank li:first-child .m2-rank-n { color: var(--acc); opacity: 1; }
.m2-rank a { font: 600 16px/1.35 var(--f-head); text-decoration: none; }
.m2-rank a::after { content: ''; position: absolute; inset: 0; }
.m2-rank li:hover a { color: var(--acc); }
.m2-rank-bar { height: 3px; border-radius: 2px; background: var(--line); margin-top: 9px; overflow: hidden; }
.m2-rank-bar i { display: block; height: 100%; background: var(--acc); opacity: .7; }
.m2-rank .m2-eye { font: 400 12px var(--f-mono); color: var(--text-dim); }

/* ── sobre ───────────────────────────────────────────────────────── */
.m2-about { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
@media (max-width: 900px) { .m2-about { grid-template-columns: 1fr; gap: 32px; } }
.m2-about p { font-size: 17px; line-height: 1.7; color: var(--soft); margin: 0 0 16px; }
.m2-about p strong { color: var(--text); }
.m2-quote { margin: 26px 0 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--acc); font: italic 400 16px/1.6 var(--f-body); color: var(--text-dim); }
.m2-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 26px; }
.m2-stat { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
.m2-stat b { display: block; font: 700 24px/1 var(--f-head); color: var(--acc); }
.m2-stat span { font: 400 11px var(--f-mono); color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; }
.m2-term { background: #0c0f0d; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
[data-theme="light"] .m2-term { background: #0f1411; }
.m2-term-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid #ffffff12; font: 400 11.5px var(--f-mono); color: #7a7a7a; }
.m2-term-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; } .m2-term-bar i:nth-child(2) { background: #febc2e; } .m2-term-bar i:nth-child(3) { background: #28c840; margin-right: 8px; }
.m2-term pre { margin: 0; padding: 18px 20px 20px; font: 400 13px/1.75 var(--f-mono); color: #d4d4d4; white-space: pre-wrap; }
.m2-term .p { color: #4ade80; } .m2-term .k { color: #7dd3fc; } .m2-term .s { color: #fbbf24; }
.m2-cursor { display: inline-block; width: 8px; height: 15px; background: #4ade80; vertical-align: -2px; animation: m2-blink 1s steps(1) infinite; }
@keyframes m2-blink { 50% { opacity: 0; } }

/* ── contacto ────────────────────────────────────────────────────── */
.m2-contact { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
@media (max-width: 900px) { .m2-contact { grid-template-columns: 1fr; gap: 28px; } }
.m2-contact > div > p { color: var(--soft); font-size: 17px; line-height: 1.65; margin: 0 0 22px; }
.m2-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.m2-points li { display: flex; gap: 12px; align-items: baseline; font-size: 15px; color: var(--soft); }
.m2-points li::before { content: '→'; color: var(--acc); font-family: var(--f-mono); }
.m2-form { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.m2-f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .m2-f2 { grid-template-columns: 1fr; } .m2-form { padding: 18px; } }
.m2-field { display: flex; flex-direction: column; gap: 7px; }
.m2-field label { font: 500 11.5px var(--f-mono); color: var(--text-dim); text-transform: uppercase; letter-spacing: .08em; }
.m2-field small { text-transform: none; letter-spacing: 0; opacity: .8; }
.m2-field input, .m2-field select, .m2-field textarea, .m2-search input {
  font: 400 15px/1.4 var(--f-body); padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); width: 100%; transition: border-color .15s, box-shadow .15s; }
.m2-field input:focus, .m2-field select:focus, .m2-field textarea:focus, .m2-search input:focus { outline: 0; border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-bg); }
.m2-field textarea { resize: vertical; min-height: 120px; }
.m2-form-a { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.m2-status { font: 400 13px var(--f-mono); color: var(--text-dim); }
.m2-status.ok { color: var(--acc); } .m2-status.erro { color: var(--red, #ef4444); }
.m2-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ── lista de artigos ────────────────────────────────────────────── */
.m2-list-h { padding: 56px 0 8px; }
.m2-list-h p { color: var(--soft); font-size: 17px; margin: 0; max-width: 60ch; }
.m2-toolbar { position: sticky; top: var(--nav-h, 52px); z-index: 5; background: var(--bg); padding: 16px 0 6px; margin-bottom: 18px; border-bottom: 1px solid var(--line-2); }
.m2-search { display: flex; gap: 10px; margin-bottom: 14px; max-width: 640px; }
.m2-search input { flex: 1; min-width: 0; padding-left: 40px; background: var(--bg2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 13px center / 17px; }
.m2-toolbar .m2-chips { margin-bottom: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.m2-toolbar .m2-chips::-webkit-scrollbar { display: none; }
.m2-toolbar .m2-chip { flex: none; }
.m2-count { font: 400 12px var(--f-mono); color: var(--text-dim); margin: 0 0 18px; }
.m2-pag { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 40px; flex-wrap: wrap; }
.m2-pag button { font: 500 13px var(--f-mono); min-width: 38px; height: 38px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--line); background: transparent; color: var(--soft); cursor: pointer; }
.m2-pag button:hover:not([disabled]) { border-color: var(--acc); color: var(--text); }
.m2-pag button[aria-current="page"] { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); font-weight: 700; }
.m2-pag button[disabled] { opacity: .35; cursor: default; }
.m2-pag .gap { color: var(--text-dim); padding: 0 4px; }
.m2-prev { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 50; font: 600 12px var(--f-mono); background: var(--acc); color: var(--acc-ink); padding: 8px 14px; border-radius: 999px; box-shadow: 0 10px 30px -10px #000; }

/* ── artigo ──────────────────────────────────────────────────────── */
.m2-progress { position: fixed; top: var(--nav-h); left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--acc-2), var(--acc)); z-index: 1000; box-shadow: 0 0 12px var(--acc); }
.m2-art-h { padding: 52px 0 30px; }
.m2-art-main { min-width: 0; }
.m2-crumbs { font: 400 12px var(--f-mono); color: var(--text-dim); margin-bottom: 22px; display: flex; gap: 8px; flex-wrap: wrap; }
.m2-crumbs a { text-decoration: none; } .m2-crumbs a:hover { color: var(--acc); }
.m2-art-t { margin: 14px 0 16px; font: 700 clamp(32px, 4.8vw, 54px)/1.06 var(--f-head); letter-spacing: -.03em; }
.m2-art-lede { font-size: 20px; line-height: 1.55; color: var(--soft); margin: 0 0 24px; }
.m2-byline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.m2-avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--acc-bg); border: 1px solid var(--acc-line); color: var(--acc); font: 700 15px var(--f-head); text-transform: uppercase; }
.m2-byline .m2-meta { font-size: 12.5px; }
.m2-art-img { margin: 0 0 40px; }
.m2-art-img img { width: 100%; border-radius: var(--r); border: 1px solid var(--line); }
/* O artigo ocupa a largura do site (a mesma do início, --wrap), com margens iguais dos dois
   lados: título, imagem e texto na mesma coluna. O índice é sempre o "Neste artigo"
   desdobrável no topo; a coluna lateral (.m2-toc-aside) fica fora, a pedido do dono (28/09). */
.m2-art-body { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
@media (max-width: 600px) { .m2-art-body { padding: 0 16px; } }
.m2-toc-aside { display: none; }
.m2-toc { position: sticky; top: calc(var(--nav-h, 52px) + 28px); font-size: 13.5px; }
.m2-toc h2 { font: 600 11px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 12px; }
.m2-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.m2-toc li a { display: block; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 2px solid transparent; color: var(--text-dim); text-decoration: none; line-height: 1.4; }
.m2-toc li.h3 a { padding-left: 26px; font-size: 12.5px; }
.m2-toc li a:hover { color: var(--text); }
.m2-toc li a.on { color: var(--acc); border-left-color: var(--acc); }
.m2-toc-m { margin: 0 0 30px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); }
.m2-toc-m summary { cursor: pointer; padding: 12px 16px; font: 600 12px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
/* Os números ficavam FORA da caixa (29/09): o reset global (* { padding: 0 }) tira o recuo
   da lista e o marcador é desenhado à esquerda do item, para lá dos 16px de margem. O recuo
   de 2.2em cabe "10." e seguintes. As sub-secções (h3) ficam recuadas e sem número, e não
   gastam números às secções principais (counter-increment: list-item 0). */
.m2-toc-m ol { margin: 0 16px 14px; padding-left: 2.2em; }
.m2-toc-m li { padding: 2px 0; }
.m2-toc-m li::marker { color: var(--text-dim); font: 500 12px var(--f-mono); }
.m2-toc-m li.h3 { list-style: none; counter-increment: list-item 0; margin-left: 1.2em; font-size: .94em; }

.m2-content { font-size: 18px; line-height: 1.78; color: var(--text); overflow-wrap: break-word; }
.m2-content .e-content > :first-child, .m2-content > :first-child { margin-top: 0; }
.m2-content p { margin: 0 0 1.2em; }
.m2-content h2, .m2-content h3, .m2-content h4 { font-family: var(--f-head); letter-spacing: -.018em; line-height: 1.25; margin: 2em 0 .6em; scroll-margin-top: calc(var(--nav-h, 52px) + 24px); position: relative; }
.m2-content h2 { font-size: 1.6em; font-weight: 700; } .m2-content h3 { font-size: 1.28em; font-weight: 600; } .m2-content h4 { font-size: 1.06em; }
.m2-content h2 .m2-anc, .m2-content h3 .m2-anc { position: absolute; left: -1.1em; color: var(--acc); opacity: 0; text-decoration: none; font-weight: 400; transition: opacity .15s; }
.m2-content h2:hover .m2-anc, .m2-content h3:hover .m2-anc { opacity: .8; }
.m2-content a { color: var(--acc); text-decoration: underline; text-decoration-color: var(--acc-line); text-underline-offset: 3px; }
.m2-content a:hover { text-decoration-color: var(--acc); }
.m2-content strong { color: var(--text); font-weight: 650; }
.m2-content ul, .m2-content ol { padding-left: 1.4em; margin: 0 0 1.2em; }
.m2-content li { margin: .35em 0; }
.m2-content li::marker { color: var(--acc); }
.m2-content blockquote { margin: 1.6em 0; padding: 14px 20px; border-left: 3px solid var(--acc); background: var(--acc-bg); border-radius: 0 10px 10px 0; color: var(--soft); }
.m2-content blockquote p:last-child { margin: 0; }
.m2-content img { border-radius: 12px; border: 1px solid var(--line); margin: 1.6em auto; height: auto; }
.m2-content hr { border: 0; height: 1px; background: var(--line); margin: 2.6em 0; }
.m2-content table { width: 100%; border-collapse: collapse; font-size: .86em; margin: 1.6em 0; display: block; overflow-x: auto; }
.m2-content th, .m2-content td { border-bottom: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.m2-content th { font: 600 .82em var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }
.m2-content :not(pre) > code { font: 400 .84em var(--f-mono); background: var(--bg3); color: var(--acc); padding: .16em .42em; border-radius: 5px; border: 1px solid var(--line); }
.m2-content pre { position: relative; font: 400 14px/1.65 var(--f-mono) !important; border-radius: 12px !important; border: 1px solid var(--line); margin: 1.6em 0 !important; padding: 18px 20px !important; background: #0d1110 !important; overflow-x: auto; }
.m2-content pre code { font: inherit !important; background: none !important; }
.m2-copy { position: absolute; top: 9px; right: 9px; font: 500 11px var(--f-mono); padding: 5px 9px; border-radius: 6px; border: 1px solid #ffffff1f; background: #ffffff0d; color: #aaa; cursor: pointer; opacity: 0; transition: opacity .15s; }
.m2-content pre:hover .m2-copy, .m2-copy:focus { opacity: 1; }
.m2-content details { margin: 1.6em 0; border: 1px solid var(--line); border-radius: 12px; background: var(--bg3); }
.m2-content details > summary { cursor: pointer; padding: 12px 18px; font: 500 .9em var(--f-mono); color: var(--acc); list-style-position: inside; }
.m2-content details > summary:hover { color: var(--text); }
.m2-content details[open] > summary { border-bottom: 1px solid var(--line); }
.m2-content details pre { margin: 0 !important; border: 0; border-radius: 0 0 12px 12px !important; }
.m2-art-tags { margin: 40px 0 0; }
.m2-art-foot { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); }
.m2-art-foot h2 { font: 600 12px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 16px; display: flex; gap: 10px; align-items: baseline; }
.m2-share { display: flex; flex-wrap: wrap; gap: 8px; }
.m2-share a { font: 500 13px/1 var(--f-body); padding: 10px 14px; border-radius: 9px; border: 1px solid var(--line); text-decoration: none; color: var(--soft); }
.m2-share a:hover { border-color: var(--acc); color: var(--text); }
.m2-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.m2-related a { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg2); text-decoration: none; }
.m2-related a:hover { border-color: var(--acc-line); }
.m2-related b { font: 600 15px/1.35 var(--f-head); }
.m2-comment { padding: 16px 0; border-bottom: 1px solid var(--line-2); }
.m2-comment-h { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.m2-comment-h .m2-avatar { width: 30px; height: 30px; font-size: 12px; }
.m2-comment-h time { font: 400 12px var(--f-mono); color: var(--text-dim); }
.m2-comment p { margin: 8px 0 0 40px; color: var(--soft); font-size: 15.5px; line-height: 1.6; }
.m2-art-foot .m2-form { margin-top: 20px; }

@media (prefers-reduced-motion: reduce) {
  .m2 *, .m2 *::before, .m2 *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 768px) { body.m2 { --nav-h: 32px; } }

/* ── 404 ─────────────────────────────────────────────────────────── */
.m2-404 { display: block; padding: 56px 0 40px; }
.m2-404-term { max-width: 560px; margin-bottom: 30px; }
.m2-404-t { color: var(--soft); font-size: 17px; margin: 0 0 18px; }
.m2-404-rec { margin-top: 56px; }

/* ── cor da categoria nos cartões ─────────────────────────────────── */
.m2-card { border-top: 2px solid var(--c, var(--line)); }
.m2-card-img { position: relative; }
.m2-card-img::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(140deg, color-mix(in srgb, var(--c, transparent) 38%, transparent) 0%, transparent 55%); }

/* ── pesquisa rápida ──────────────────────────────────────────────── */
.m2-busca { position: fixed; inset: 0; z-index: 100000; background: rgba(0, 0, 0, .6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; justify-content: center; align-items: flex-start; padding: calc(var(--nav-h, 36px) + 8vh) 16px 16px; }
.m2-busca-caixa { width: 100%; max-width: 640px; background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 30px 80px -20px #000; overflow: hidden; }
.m2-busca-f { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.m2-busca-f svg { width: 18px; height: 18px; color: var(--text-dim); flex: none; }
.m2-busca-f input[type=search] { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: 400 17px var(--f-body); }
.m2-busca-f kbd { font: 500 11px var(--f-mono); color: var(--text-dim); border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px; }
.m2-busca-r { max-height: min(60vh, 460px); overflow-y: auto; }
.m2-busca-r:empty { display: none; }
.m2-busca-i { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; text-decoration: none; border-bottom: 1px solid var(--line-2); }
.m2-busca-i b { font: 600 15px/1.35 var(--f-head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m2-busca-i span:last-child { font: 400 11.5px var(--f-mono); color: var(--text-dim); white-space: nowrap; }
.m2-busca-i:hover, .m2-busca-i:focus { background: var(--acc-bg); outline: 0; }
.m2-busca-i:hover b { color: var(--acc); }
.m2-busca-r .m2-empty { padding: 16px; margin: 0; }
.m2-busca-p { padding: 10px 16px; font: 400 11.5px var(--f-mono); color: var(--text-dim); }
@media (max-width: 560px) { .m2-busca-i { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* ── leitura em ecrãs largos: o texto ocupa a largura toda, por isso a letra cresce um pouco ── */
@media (min-width: 1400px) { .m2-content { font-size: 19.5px; line-height: 1.85; } }