/* Acabamento premium das paginas internas (blog, artigos, comparativos,
   ferramentas e segmentos). Carregado depois do style.css e do blog.css.
   Mesma cor de destaque unica da home: --primary. */

body { --accent: var(--primary); --accent-rgb: 59,130,246; --accent-soft: rgba(var(--accent-rgb),.14); }

::selection { background: rgba(var(--accent-rgb),.35); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

/* Barra de progresso de leitura */
.mge-progress { position: fixed; z-index: 100; left: 0; top: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, #60a5fa, var(--accent)); pointer-events: none; }

/* Topo escuro com brilho suave, sem desenho geometrico */
.blog-hero, .article-hero { position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(900px 420px at 85% -20%, #16224a 0%, var(--navy-950) 62%); }
.blog-hero::before, .article-hero::before { content: ""; position: absolute; z-index: -1; width: 520px; height: 520px; left: -140px; top: -220px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb),.32), rgba(var(--accent-rgb),0) 68%); pointer-events: none; }
.blog-hero { padding: 76px 0 44px; }
.blog-hero h1 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.02em; line-height: 1.12; }
.blog-hero p { font-size: 17px; line-height: 1.65; }
.article-hero h1 { letter-spacing: -.02em; }
.article-tag { padding: 5px 13px; border-radius: 999px; border: 1px solid rgba(var(--accent-rgb),.4); background: var(--accent-soft); letter-spacing: .1em; }
.article-hero .article-tag { color: #93c5fd; }

/* Botoes */
.btn { border-radius: 12px; transition: background .25s ease, transform .25s ease, box-shadow .25s ease, border-color .25s ease, color .25s ease; }
.btn.primary { background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 82%, #fff), var(--primary-hover)); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 12px 28px -10px rgba(var(--accent-rgb),.7); }
.btn.primary:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 70%, #fff), color-mix(in srgb, var(--primary-hover) 90%, #fff)); transform: translateY(-2px) scale(1.02); box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 16px 34px -10px rgba(var(--accent-rgb),.9); }
.btn .material-symbols-outlined { transition: transform .25s ease; }
.btn:hover .material-symbols-outlined { transform: translateX(4px); }

/* Cartoes do blog, comparativos, ferramentas e segmentos */
.blog-card { position: relative; overflow: hidden; border-radius: 20px; border-color: rgba(20,27,44,.08); box-shadow: 0 1px 2px rgba(14,21,38,.05), 0 12px 32px -12px rgba(14,21,38,.18);
  transition: transform .14s ease-out, box-shadow .3s ease, border-color .3s ease; }
.blog-card:hover { border-color: var(--accent); box-shadow: 0 2px 4px rgba(14,21,38,.05), 0 24px 48px -16px rgba(var(--accent-rgb),.35); }
.blog-card.tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px)); }
.blog-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(380px circle at var(--sx, 50%) var(--sy, 50%), rgba(var(--accent-rgb),.15), transparent 62%); }
.blog-card:hover::after { opacity: 1; }
.blog-card-tag { color: var(--primary-hover); letter-spacing: .08em; }
.blog-filter { transition: border-color .25s ease, color .25s ease, background .25s ease, transform .25s ease; }
.blog-filter:hover { transform: translateY(-2px); }

/* Artigos: caixa de chamada e tabelas */
.article-cta { position: relative; overflow: hidden; isolation: isolate; border-radius: 20px; padding: 30px;
  background: linear-gradient(160deg, #eaf1ff, #f6f9ff); border-color: rgba(var(--accent-rgb),.25);
  box-shadow: 0 18px 40px -22px rgba(var(--accent-rgb),.45); }
.article-cta::before { content: ""; position: absolute; z-index: -1; width: 280px; height: 280px; right: -90px; top: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb),.22), transparent 68%); }
.compare-table-wrap { border-radius: 18px; border-color: rgba(20,27,44,.08); box-shadow: 0 1px 2px rgba(14,21,38,.05), 0 12px 32px -16px rgba(14,21,38,.2); }
.compare-table tbody tr { transition: background .2s ease; }
.compare-table tbody tr:hover td { background: #f6f9ff; }
.compare-table td.highlight, .compare-table tbody tr:hover td.highlight { background: var(--blue-050); }
.article-body h2 { letter-spacing: -.015em; }

@media (prefers-reduced-motion: reduce) {
  .btn, .blog-card, .blog-filter { transition: none; }
  .blog-card.tilt { transform: none; }
}

/* ===== Paginas dentro do site de um sistema (body.ctx-*) =====
   Topo, rodape e cores do proprio sistema; ver blog/partials/contexto.php */
.ctx .brand-ctx { gap: 10px; }
.ctx .brand-ctx .brand-logo { height: 32px; width: auto; }
.ctx .brand-nome { font-family: "Manrope", sans-serif; font-weight: 800; font-size: 1.15rem; color: #fff; letter-spacing: -.01em; }
.ctx .brand-logo.logo-escura { height: 30px; filter: invert(1); mix-blend-mode: screen; }

.ctx-maxierp { --navy-950: #0E1526; --navy-900: #131C30; }
.ctx-techcell { --navy-950: #121417; --navy-900: #1F242A; --navy-border: #2A3038; --accent-rgb: 59,130,246; }
.ctx-genesis { --navy-950: #0f172a; --navy-900: #1e293b; --navy-border: #334155; --primary: #1e293b; --primary-hover: #0f172a; --blue-050: #eef2f7; --accent-rgb: 30,41,59; }
.ctx-systemos { --navy-950: #0B0F17; --navy-900: #111726; --navy-border: #242D40; --primary: #F97316; --primary-hover: #EA580C; --blue-050: #fff1e6; --accent-rgb: 249,115,22; }

/* Gênesis: botao e destaques escuros precisam de contraste no topo escuro */
.ctx-genesis header .btn.primary, .ctx-genesis .hero-actions .btn.primary { background: #fff; color: #0f172a; box-shadow: none; }
.ctx-genesis .article-hero .article-tag, .ctx-genesis .blog-hero .article-tag { color: #cbd5e1; border-color: rgba(203,213,225,.35); background: rgba(203,213,225,.1); }
.ctx-genesis .article-body a, .ctx-genesis .article-cta a:not(.btn) { color: #0f172a; text-decoration: underline; }
.ctx-systemos .article-hero .article-tag { color: #fdba74; }
.ctx-systemos .article-body a { color: #EA580C; }
.ctx-systemos .article-cta { background: linear-gradient(160deg, #fff1e6, #fff8f2); }

/* Cabecalho igual ao da home (mesma altura e mesmo botao): o menu nao muda de lugar ao ir da home para o blog,
   comparativos, ferramentas ou segmentos. O fundo continua solido (as paginas internas nao tem a faixa escura da home atras do menu). */
header { background: var(--navy-950); }
header .nav-actions .btn { padding: 14px 24px; letter-spacing: .005em; }

/* Botao do CTA dos artigos e comparativos: os links do texto (sublinhado/cor do sistema) nao podem pintar o botao */
.ctx .article-body a.btn, .ctx .article-cta a.btn { color: #fff; text-decoration: none; }