/* Artigo "Por que ter um ERP" (/erp-article) — escopado em .support-page--article para não afetar as outras páginas de suporte */

.sc-pdf:has(.support-page--article) {
    --product-navy: #062b4f;
    --product-navy-dark: #041f3a;
    --product-navy-mid: #073b6d;
    --product-blue: #008ef4;
    --product-blue-soft: #eaf6ff;
    --product-ice: #f5faff;
    --product-orange: #ff6b20;
    --product-orange-hover: #ed5712;
    --product-text: #062b4f;
    --product-muted: #63778c;
    --product-border: #dce9f4;
    --product-font: Inter, "Segoe UI", "Segoe UI Variable", sans-serif;
    --product-wrap: 1280px;
    --product-gutter: 32px;
    /* Derivados para AA (pendência do DS: --product-blue dá 3,4:1 no branco) */
    --cv-blue-text: #0067b8;
    --pr-accent-dark: #9ed6ff;
    --pr-text-dark: rgba(234, 246, 255, 0.86);
    --cv-shadow-card: 0 16px 34px rgba(6, 43, 79, 0.08);
}

.sc-pdf:has(.support-page--article),
.sc-pdf:has(.support-page--article) :is(h1, h2, h3, p, a, li, span, button, strong, b, small) {
    font-family: var(--product-font) !important;
}

.support-page--article {
    --support-navy: var(--product-navy);
    --support-deep: var(--product-navy-dark);
    --support-blue: var(--product-blue);
    --support-orange: var(--product-orange);
    --support-ink: var(--product-text);
    --support-text: var(--product-muted);
    --support-line: var(--product-border);
    color: var(--product-text);
    background: var(--product-ice);
}

.support-page--article .support-wrap {
    width: min(calc(100% - (var(--product-gutter) * 2)), var(--product-wrap));
}

.support-page--article a:focus-visible,
.support-page--article button:focus-visible {
    outline: 3px solid rgba(10, 149, 255, 0.45) !important;
    outline-offset: 3px;
}

.support-page--article .support-kicker {
    display: block;
    color: var(--cv-blue-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.support-page--article .support-hero .support-kicker,
.support-page--article .support-cta .support-kicker {
    color: var(--pr-accent-dark);
}

/* Hero */

.support-page--article .support-hero {
    padding: calc(var(--sp-hero-nav-h, 78px) + 18px) 0 72px;
    background:
        radial-gradient(circle at 82% 20%, rgba(0, 142, 244, 0.2), transparent 26%),
        linear-gradient(118deg, var(--product-navy-dark) 0%, var(--product-navy) 46%, var(--product-navy-mid) 100%);
}

.support-page--article .erp-breadcrumb ol {
    align-items: center;
}

.support-page--article .erp-breadcrumb a {
    display: inline-block;
    padding: 12px 0;
}

.support-page--article .support-hero h1 {
    margin: 12px 0 16px;
    font-size: clamp(34px, 4.4vw, 54px);
    font-weight: 800 !important;
    line-height: 1.08;
    letter-spacing: -0.035em;
    color: #fff !important;
}

.support-page--article .support-hero p {
    color: var(--pr-text-dark);
    font-size: 18px;
    line-height: 1.65;
    letter-spacing: 0;
}

/* Corpo */

.support-page--article .support-section {
    padding: 72px 0;
}

.support-page--article .content-article-layout {
    gap: 40px;
}

.support-page--article .content-article,
.support-page--article .content-article-summary {
    border-radius: 16px;
    box-shadow: var(--cv-shadow-card);
}

.support-page--article .content-article-summary h2 {
    margin: 8px 0 8px;
    color: var(--product-text) !important;
    font-size: 22px;
    font-weight: 800 !important;
    line-height: 1.25;
}

.support-page--article .content-article-summary p {
    color: var(--product-muted);
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: 0;
}

.support-page--article .erp-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.support-page--article .erp-toc a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--product-blue-soft);
    color: var(--cv-blue-text) !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.support-page--article .erp-toc a:hover {
    background: var(--product-border);
}

.support-page--article .content-article {
    padding: 12px 40px 40px;
}

/* Título de seção dentro do artigo: degrau de artigo, menor que o h2 de seção de página */
.support-page--article .content-article h2 {
    scroll-margin-top: 110px;
    padding-top: 28px;
    margin: 28px 0 16px;
    border-top: 1px solid var(--product-border);
    color: var(--product-text) !important;
    font-size: 24px;
    font-weight: 800 !important;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.support-page--article .content-article h2:first-child {
    padding-top: 18px;
    margin-top: 0;
    border-top: 0;
}

.support-page--article .content-article p,
.support-page--article .content-article-list {
    max-width: 68ch;
}

.support-page--article .content-article p {
    color: var(--product-muted);
    font-size: 16px;
    line-height: 1.65;
    letter-spacing: 0;
}

.support-page--article .content-article-list {
    margin: 0 0 16px;
    padding-left: 20px;
    list-style: disc;
    color: var(--product-muted);
    font-size: 16px;
    line-height: 1.65;
}

.support-page--article .content-article-list li::marker {
    color: var(--cv-blue-text);
}

.support-page--article .content-article-list li + li {
    margin-top: 8px;
}

.support-page--article .content-article strong {
    color: var(--product-text);
}

/* CTA */

.support-page--article .support-cta {
    padding: 72px 0;
    background: linear-gradient(118deg, var(--product-navy-dark) 0%, var(--product-navy) 46%, var(--product-navy-mid) 100%);
}

.support-page--article .support-cta h2 {
    margin: 8px 0 8px;
    color: #fff !important;
    font-size: clamp(32px, 3.6vw, 40px);
    font-weight: 800 !important;
    line-height: 1.12;
}

.support-page--article .support-cta p {
    color: var(--pr-text-dark);
    font-size: 16px;
    line-height: 1.65;
    letter-spacing: 0;
}

.support-page--article .support-cta .sp-product-btn {
    flex: 0 0 auto;
}

@media (max-width: 1199px) {
    .sc-pdf:has(.support-page--article) {
        --product-gutter: 24px;
    }
}

@media (max-width: 767px) {
    .sc-pdf:has(.support-page--article) {
        --product-gutter: 16px;
    }

    .support-page--article .support-section,
    .support-page--article .support-cta {
        padding: 56px 0;
    }

    .support-page--article .content-article {
        padding: 8px 16px 24px;
    }

    .support-page--article .support-cta h2 {
        font-size: 32px;
    }

    .support-page--article .support-cta .sp-product-btn {
        width: 100%;
    }
}

/* ---- Guia /o-que-e-erp ---- */
.erp-guia .erp-meta { margin-top: 14px; font-size: 14px; opacity: .85; }

.erp-resumo {
    margin: 0 0 28px;
    padding: 18px 20px;
    border-left: 4px solid #0070c9;
    border-radius: 10px;
    background: #eaf6ff;
    color: #102a43;
}

.erp-resumo > strong { display: block; margin-bottom: 6px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #0070c9; }
.erp-resumo p { margin: 0; line-height: 1.65; }

.erp-passos { counter-reset: none; }

.erp-tabela-wrap { margin: 18px 0 22px; overflow-x: auto; border: 1px solid #dbe4f0; border-radius: 12px; }
.erp-tabela { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
.erp-tabela th, .erp-tabela td { padding: 12px 14px; border-bottom: 1px solid #e6edf6; text-align: left; vertical-align: top; }
.erp-tabela thead th { background: #f4f7fb; color: #102a43; font-weight: 700; }
.erp-tabela tbody th { color: #102a43; font-weight: 600; white-space: nowrap; }
.erp-tabela tbody td:last-child { background: #f2fbf5; color: #14532d; font-weight: 600; }
.erp-tabela tr:last-child th, .erp-tabela tr:last-child td { border-bottom: 0; }

.erp-faq { display: grid; gap: 10px; margin-top: 14px; }
.erp-faq details { border: 1px solid #dbe4f0; border-radius: 10px; background: #fff; padding: 0 16px; }
.erp-faq summary { cursor: pointer; padding: 14px 0; font-weight: 700; color: #102a43; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.erp-faq summary::-webkit-details-marker { display: none; }
.erp-faq summary::after { content: "+"; color: #0070c9; font-size: 20px; line-height: 1; }
.erp-faq details[open] summary::after { content: "−"; }
.erp-faq details p { margin: 0 0 14px; line-height: 1.6; }