/* ===========================================================
   EcoHook — componentes das métricas (seção #numeros da home e página /numeros/)
   Segundo CSS externo do projeto, pelo mesmo motivo do blog.css: os mesmos
   blocos aparecem em duas páginas. Usa só os tokens do :root de cada página.
   =========================================================== */
.m-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line);border-radius:4px;overflow:hidden}
.m-kpi{background:var(--ink);padding:24px 22px;display:flex;flex-direction:column;gap:6px;min-width:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.m-kpi .v{font-family:var(--font-display);font-weight:700;font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1;color:var(--paper);font-variant-numeric:tabular-nums}
.m-kpi .l{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.m-kpi .n{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.04em;color:var(--accent)}
.m-charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}
.m-c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.m-card{border:1px solid var(--line);border-radius:4px;background:var(--panel);padding:20px 20px 16px;display:flex;flex-direction:column;gap:14px;min-width:0}
.m-ct{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.m-ct span{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--paper)}
.m-ct em{font-style:normal;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;color:var(--muted-2)}
.m-card svg{width:100%;height:auto;display:block;overflow:visible}
.m-grid{stroke:var(--line-soft);stroke-width:1}
.m-ax{font-family:var(--font-mono);font-size:12px;fill:var(--muted-2)}
.m-bar{fill:var(--accent);opacity:.55}.m-bar.hi{opacity:1;fill:var(--lime-bright)}.m-bar.part{opacity:.5;fill:var(--sun)}
.m-bar:hover{opacity:1}
.m-area{fill:var(--accent);opacity:.12}.m-line{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}.m-dot{fill:var(--lime-bright);stroke:var(--ink);stroke-width:2}
.m-hbs{display:flex;flex-direction:column;gap:11px}
.m-hb{display:grid;grid-template-columns:minmax(0,9.5em) 1fr 3.6em;align-items:center;gap:12px;font-size:.92rem}
.m-hb .k{color:var(--paper);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-hb .bar{height:8px;background:var(--line-soft);border-radius:1px;overflow:hidden}
.m-hb .bar i{display:block;height:100%;background:var(--accent)}
.m-hb .v{font-family:var(--font-mono);font-size:.74rem;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.m-nets{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:18px}
.m-net{border:1px solid var(--line);border-radius:4px;padding:18px 20px;display:flex;flex-direction:column;gap:4px;transition:border-color .25s,transform .25s}
.m-net:hover{border-color:var(--accent);transform:translateY(-3px)}
.m-net .p{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.m-net .v{font-family:var(--font-display);font-weight:700;font-size:1.8rem;line-height:1.05;font-variant-numeric:tabular-nums}
.m-net .s{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.04em;color:var(--muted-2)}
.m-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:26px}
.m-upd{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;color:var(--muted);display:inline-flex;align-items:center;gap:10px}
.m-upd::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(147,214,42,.18);flex:none}
.m-upd:empty{display:none}
.m-h3{font-family:var(--font-display);font-weight:600;font-size:1.25rem;text-transform:uppercase;margin:38px 0 14px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.m-h3 em{font-style:normal;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;color:var(--muted-2);text-transform:none}
.m-tops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.m-top{border:1px solid var(--line);border-radius:4px;background:var(--panel);padding:20px;display:flex;flex-direction:column;gap:8px;transition:border-color .25s,transform .25s;min-width:0}
.m-top:hover{border-color:var(--accent);transform:translateY(-3px)}
.m-tag{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sun)}
.m-cap{color:var(--paper);font-size:.95rem;line-height:1.45;flex:1;overflow-wrap:anywhere}
.m-row{font-family:var(--font-mono);font-size:.7rem;color:var(--muted)}.m-row b{color:var(--paper);font-weight:700}
.m-go{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-top:4px}
.m-list{list-style:none;counter-reset:mv;display:flex;flex-direction:column;gap:12px}
.m-list li{counter-increment:mv;display:grid;grid-template-columns:1.8em 1fr;gap:2px 10px;font-size:.95rem}
.m-list li::before{content:counter(mv);grid-row:span 2;font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:var(--accent);line-height:1.1}
.m-list a{color:var(--paper);overflow-wrap:anywhere}.m-list a:hover{color:var(--accent)}
.m-list span{font-family:var(--font-mono);font-size:.66rem;color:var(--muted-2)}
@media(max-width:1080px){.m-c4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.m-charts{grid-template-columns:1fr}.m-tops{grid-template-columns:1fr}}
@media(max-width:420px){.m-ax{font-size:22px}}
@media(max-width:560px) and (min-width:421px){.m-ax{font-size:16px}}
@media(max-width:560px){.m-c4{grid-template-columns:1fr}.m-kpis{grid-template-columns:1fr 1fr}.m-kpi{padding:18px 16px}.m-hb{grid-template-columns:minmax(0,7.5em) 1fr 3.4em;gap:10px}}