/* ==========================================================================
   Mercato Flux | Estilos das paginas de conteudo/SEO
   Reaproveita os tokens de styles.css (--bg, --primary, etc.)
   ========================================================================== */

.seo-main{position:relative;overflow:hidden}
.seo-glow{position:absolute;left:50%;top:-180px;width:760px;height:460px;transform:translateX(-50%);
  background:rgba(99,102,241,.16);filter:blur(120px);border-radius:50%;pointer-events:none;z-index:-1}

/* Breadcrumb */
.breadcrumb{font-size:.78rem;color:var(--muted);padding:1.5rem 0 0}
.breadcrumb a{color:var(--muted);border-bottom:1px solid transparent}
.breadcrumb a:hover{color:var(--fg);border-color:var(--border)}
.breadcrumb span{color:var(--fg)}

/* Hero da pagina */
.seo-hero{padding:2rem 0 1rem}
.seo-hero .badge{margin-bottom:1.25rem}
.seo-hero h1{max-width:18ch}
.seo-hero .lead{margin-top:1.25rem;font-size:1.05rem;color:var(--muted);max-width:62ch}
.seo-hero .cta-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}

/* Conteudo em prosa */
.prose{max-width:760px}
.prose > section{padding:2.25rem 0;border-top:1px solid var(--border)}
.prose h2{margin-bottom:.85rem}
.prose h3{font-size:1.1rem;font-weight:600;margin:1.5rem 0 .4rem;font-family:var(--display)}
.prose p{color:var(--fg);opacity:.92;margin:.7rem 0}
.prose p.muted{color:var(--muted);opacity:1}
.prose ul,.prose ol{margin:.75rem 0;padding-left:1.2rem;color:var(--fg);opacity:.92}
.prose li{margin:.45rem 0}
.prose strong{color:var(--fg)}
.prose a.inline{color:var(--primary);border-bottom:1px solid rgba(99,102,241,.4)}
.prose a.inline:hover{border-color:var(--primary)}

/* Callout / destaque */
.callout{margin:1.25rem 0;padding:1.1rem 1.25rem;background:var(--surface);
  border:1px solid var(--border);border-left:3px solid var(--primary);border-radius:.6rem;font-size:.95rem}

/* Lista de pilares / problemas */
.pillars{display:grid;gap:1rem;margin-top:1.25rem}
@media(min-width:640px){.pillars{grid-template-columns:1fr 1fr}}
.pillar{background:var(--surface);border:1px solid var(--border);border-radius:.9rem;padding:1.1rem 1.2rem}
.pillar h3{margin:0 0 .35rem;font-size:1rem}
.pillar p{margin:0;color:var(--muted);font-size:.9rem}

/* Faixa de CTA */
.cta-band{margin:2.5rem 0 0;padding:2rem 1.5rem;border:1px solid var(--border);border-radius:1.1rem;
  background:linear-gradient(135deg,rgba(99,102,241,.16),rgba(99,102,241,.04));text-align:center}
.cta-band h2{margin:0 0 .5rem}
.cta-band p{color:var(--muted);max-width:52ch;margin:0 auto 1.25rem}
.cta-band .cta-row{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}

/* Links internos */
.ilinks{display:grid;gap:.85rem;margin-top:1.25rem}
@media(min-width:640px){.ilinks{grid-template-columns:1fr 1fr}}
.ilink{display:block;background:var(--surface);border:1px solid var(--border);border-radius:.8rem;padding:1rem 1.1rem;transition:border-color .15s,background .15s}
.ilink:hover{border-color:var(--primary);background:var(--elevated)}
.ilink strong{display:block;font-family:var(--display);font-size:.98rem}
.ilink span{color:var(--muted);font-size:.85rem}

/* Tabela comparativa */
.cmp{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.9rem}
.cmp th,.cmp td{border:1px solid var(--border);padding:.7rem .8rem;text-align:left;vertical-align:top}
.cmp th{background:var(--surface);font-family:var(--display)}

/* WhatsApp btn cor de marketplace (opcional) */
.btn-wa{background:#25D366;color:#fff}
.btn-wa:hover{opacity:.92}