/* ── Mais Valor — estilos da seção de Artigos ─────────────────── */

.art{max-width:800px;margin:0 auto;padding-bottom:2.5rem}

/* Imagem de capa no topo do artigo */
.art-hero-img-wrap{max-width:800px;margin:1.6rem auto}
.art-hero-img{width:100%;aspect-ratio:20/9;object-fit:cover;border-radius:var(--radius-lg);border:1px solid var(--border);display:block;background:var(--bg3)}

.art-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 1.6rem}
.art-tag{font-size:11px;font-weight:700;padding:3px 12px;border-radius:20px;letter-spacing:.3px}
.art-tag.nivel-1{background:rgba(31,201,110,0.12);color:var(--up);border:1px solid rgba(31,201,110,0.3)}
.art-tag.nivel-2{background:var(--gold-dim);color:var(--gold);border:1px solid var(--border2)}
.art-tag.nivel-3{background:rgba(232,80,58,0.10);color:var(--dn);border:1px solid rgba(232,80,58,0.3)}
.art-tag.tempo{background:var(--bg3);color:var(--text3);border:1px solid var(--border)}

.art p{color:var(--text2);font-size:15px;line-height:1.85;margin:0 0 1.15rem}
.art ul,.art ol{color:var(--text2);font-size:15px;line-height:1.85;margin:0 0 1.15rem;padding-left:1.4rem}
.art li{margin-bottom:.45rem}
.art strong{color:var(--text)}
.art a{color:var(--gold);border-bottom:1px dotted var(--border2)}
.art a:hover{border-bottom-style:solid}
.art h2{font-family:var(--font-display);font-size:27px;font-weight:400;margin:2.2rem 0 .9rem;line-height:1.25}
.art h2 em{color:var(--gold);font-style:italic}
.art h3{font-size:17px;font-weight:700;margin:1.6rem 0 .6rem;color:var(--text)}

html:not([data-theme="light"]) .art p,
html:not([data-theme="light"]) .art ul,
html:not([data-theme="light"]) .art ol{color:#B3B1AB}

/* Figuras / gráficos */
.art-fig{margin:1.8rem 0;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px 18px 14px}
.art-fig svg{width:100%;height:auto;display:block}
.art-fig figcaption{font-size:11.5px;color:var(--text3);margin-top:10px;text-align:center;line-height:1.5}

/* Caixa de destaque (tracejado dourado — padrão do site) */
.art-box{border:1.5px dashed var(--gold);border-radius:var(--radius-lg);padding:16px 18px;margin:1.6rem 0}
.art-box p{margin:0;font-size:14px}
.art-box p+p{margin-top:.7rem}

/* Tabelas */
.art-table{width:100%;border-collapse:collapse;margin:1.6rem 0;font-size:13.5px}
.art-table th{color:var(--text3);font-size:11px;text-transform:uppercase;letter-spacing:.5px;text-align:left;padding:10px 12px;border-bottom:1px solid var(--border3)}
.art-table td{padding:10px 12px;border-bottom:1px solid var(--border);color:var(--text2);line-height:1.5}
.art-table td:first-child{color:var(--text);font-weight:600}
.art-table .r{text-align:right}

/* CTA para ferramentas do site */
.art-cta{display:flex;gap:10px;flex-wrap:wrap;margin:1.6rem 0}
.art-cta a{display:inline-block;background:var(--gold);color:#0A0A0A;font-weight:800;font-size:13px;padding:10px 18px;border-radius:9px;border-bottom:none;transition:var(--transition)}
.art-cta a:hover{transform:translateY(-1px)}
.art-cta a.sec{background:var(--bg4);color:var(--text)}

/* Aviso educativo */
.art-aviso{margin-top:2rem;padding:12px 16px;background:var(--gold-dim);border:1px solid var(--border2);border-radius:var(--radius);color:var(--text2);font-size:12px;line-height:1.6}
html:not([data-theme="light"]) .art-aviso{color:#A8A6A0}

/* Navegação entre artigos */
.art-nav{display:flex;justify-content:space-between;gap:12px;margin-top:2rem;flex-wrap:wrap}
.art-nav a{font-size:13px;color:var(--gold);border-bottom:none}

/* ── Página índice ── */
.art-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin:1.5rem 0 2.5rem}
.art-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;display:flex;flex-direction:column;gap:10px;transition:var(--transition)}
.art-card:hover{border-color:var(--border2);transform:translateY(-2px)}
.art-card .art-thumb{width:100%;height:auto;display:block;border-radius:var(--radius);background:var(--bg3)}
.art-card .ico{font-size:28px}
.art-card h2{font-family:var(--font-display);font-size:20px;font-weight:400;line-height:1.3;margin:0}
.art-card p{font-size:13px;color:var(--text2);line-height:1.65;margin:0;flex:1}
html:not([data-theme="light"]) .art-card p{color:#A8A6A0}
.art-card .meta{display:flex;gap:6px;flex-wrap:wrap}
.art-card .ler{font-size:12.5px;font-weight:700;color:var(--gold)}
.art-card.breve{opacity:.55;pointer-events:none}

/* ── Motion reveal dos gráficos ao rolar a página ──────────────
   Sem estado padrão "escondido": só entra em ação depois que o
   motion.js confirma suporte do navegador e preferência do usuário,
   via body.mv-ready. Sem JS ou com "reduzir movimento" ligado, os
   gráficos aparecem estáticos e completos, como sempre apareceram. */
body.mv-ready .art-fig{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
body.mv-ready .art-fig.mv-in{opacity:1;transform:translateY(0)}

body.mv-ready .art-fig svg .mv-bar-h,
body.mv-ready .art-fig svg .mv-bar-v{transition:transform .9s cubic-bezier(.16,.85,.24,1)}
body.mv-ready .art-fig svg .mv-bar-h{transform-box:fill-box;transform-origin:left center;transform:scaleX(0)}
body.mv-ready .art-fig svg .mv-bar-v{transform-box:fill-box;transform-origin:bottom center;transform:scaleY(0)}
body.mv-ready .art-fig.mv-in svg .mv-bar-h,
body.mv-ready .art-fig.mv-in svg .mv-bar-v{transform:none}

body.mv-ready .art-fig svg .mv-dot{transform-box:fill-box;transform-origin:center;opacity:0;transform:scale(0);transition:opacity .35s ease .5s,transform .35s ease .5s}
body.mv-ready .art-fig.mv-in svg .mv-dot{opacity:1;transform:scale(1)}