/* Ponte entre as páginas internas antigas (blog, ferramentas, códigos de falha)
   e o visual novo da página principal: mesma fonte, cores, cantos e títulos.
   Carregado depois de style.min.css e site-novo.css. */
:root {
  --font-sans: "Lexend", "Segoe UI", system-ui, -apple-system, sans-serif;
  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-1: none;
  --shadow-2: 0 14px 30px -18px rgba(7, 29, 54, .35);
  --shadow-3: 0 20px 44px -22px rgba(7, 29, 54, .45);
  --surface-alt: #f4f7fa;
  --border: #e1e8ef;
}

body { color: var(--texto); font-family: var(--sans); font-weight: 300; background: var(--branco); }
main h1, main h2 { font-weight: 200; letter-spacing: -0.01em; }
main h3, main h4 { font-weight: 400; }
main strong, main b { font-weight: 600; }
main p, main li { line-height: 1.65; }

/* rótulo pequeno acima dos títulos: sem caixa alta nem traço */
.eyebrow { color: var(--azul); font-family: var(--sans); font-size: .95rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.eyebrow::before { display: none; }

/* botões em pílula, como na página principal */
.btn, .dx-btn, .tool-submit, .tool-clear, .fcs-wa-btn, .blog-whatsapp, .blog-link, .article-back, .manuals-clear { border-radius: 999px; font-weight: 500; }
.btn-primary, .fcs-wa-btn, .blog-whatsapp { color: var(--branco); background: var(--verde); border-color: var(--verde); }
.btn-primary:hover, .fcs-wa-btn:hover, .blog-whatsapp:hover { color: var(--branco); background: var(--verde-escuro); }

/* cartões: borda fina, cantos de 14px, sem sombra fixa */
.blog-card, .tool-card, .article-shell, .fcs-result, .dx-panel, .future-details { border: 1px solid #e1e8ef; border-radius: var(--raio); box-shadow: none; }
.blog-card { transition: transform .2s ease, box-shadow .2s ease; }
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }

/* topo das páginas internas: faixa azul-marinho, como as seções escuras da página principal */
.blog-hero, .tools-hero, .fcs-hero {
  color: var(--branco);
  background: linear-gradient(135deg, #0b2e54 0%, #071d36 100%);
  border: 0;
}
.blog-hero h1, .tools-hero h1, .fcs-hero h1 { color: var(--branco); font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.08; font-weight: 200; }
.blog-hero p, .tools-hero p, .fcs-hero p { color: rgba(255, 255, 255, .85); }
.blog-hero .eyebrow, .tools-hero .eyebrow, .fcs-hero .eyebrow { color: var(--verde-claro); }
.tools-hero .btn-secondary, .tools-hero .btn:not(.btn-primary) { color: var(--branco); background: transparent; border: 1px solid rgba(255, 255, 255, .7); }
.tools-hero .btn-secondary:hover, .tools-hero .btn:not(.btn-primary):hover { color: var(--noite); background: var(--branco); }

/* artigos do blog */
.article-main { background: var(--cinza); }
.article-header h1 { font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.12; }
.article-content h2 { margin-top: 1.6em; font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.article-cta { color: var(--branco); background: var(--marinho); border-radius: var(--raio); }
.blog-category { color: var(--azul); font-family: var(--sans); font-weight: 500; letter-spacing: 0; text-transform: none; }

/* títulos dentro do texto dos artigos e ferramentas (o CSS novo zera margens de h1–h3) */
.article-content h2, .article-content h3, .tools-section h2, .fcs-search-section h2 { margin: 1.4em 0 .5em; }
.article-header h1, .blog-hero h1, .tools-hero h1, .fcs-hero h1 { margin: 0 0 .4em; }

/* ── Central de manuais ──────────────────────────────────────────────────── */
.mn-topo { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 72px 0 80px; }
.mn-topo h1 { color: var(--branco); font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.08; font-weight: 200; }
.mn-busca { width: min(560px, 100%); }
.mn-busca input { width: 100%; min-height: 52px; padding: 12px 22px; color: var(--texto); font: 400 1rem var(--sans); background: var(--branco); border: 0; border-radius: 999px; }
.mn-busca input:focus-visible { outline: 3px solid var(--verde-claro); outline-offset: 2px; }
.mn-contagem { margin: 0; color: rgba(255, 255, 255, .7); font-size: .9rem; }
.mn-aviso { margin: 0; color: rgba(255, 255, 255, .7); font-size: .9rem; }
.mn-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.mn-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px; background: var(--branco); border: 1px solid #e1e8ef; border-radius: var(--raio); transition: transform .2s ease, box-shadow .2s ease; }
.mn-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(7, 29, 54, .35); }
.mn-card[hidden] { display: none; }
.mn-card h2 { color: var(--marinho); font-size: 1.5rem; font-weight: 400; }
.mn-card p { margin: 0; color: var(--texto-2); }
.mn-card .pilula { margin-top: auto; min-height: 42px; padding: 8px 20px; font-size: .95rem; }
.mn-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mn-tag { padding: 3px 10px; color: var(--texto-2); font-size: .78rem; background: var(--cinza); border-radius: 999px; }
.mn-ok { color: #0f6b3f; background: #e8f6ee; }
.mn-cod { color: var(--azul); background: var(--azul-suave); }
.mn-trilha { padding: 14px 0; color: var(--texto-2); font-size: .9rem; }
.mn-trilha a { color: var(--azul); text-decoration: none; }
.mn-trilha a:hover { text-decoration: underline; }
@media (max-width: 900px) { .mn-topo { padding: 44px 0 52px; } }