/* =====================================================================
   artigos.css — design system compartilhado das seções de conteúdo
   (guias/, alternativas/, comparativos/)
   Carregado DEPOIS do <style> inline de cada página, então sobrescreve
   os componentes comuns. Componentes exclusivos de cada página herdam
   a base (cores, raios, sombras) mas mantêm seu layout próprio.
   ===================================================================== */

:root {
  --rb-magenta: #cc3366;
  --rb-magenta-deep: #a02050;
  --rb-magenta-dark: #8a1a44;
  --rb-ink: #1a1a1a;
  --rb-text: #4a4a52;
  --rb-muted: #6b6b73;
  --rb-rose-bg: #fdf1f5;
  --rb-rose-border: #f0dbe2;
  --rb-line: #ece7e9;
  --rb-radius: 16px;
  --rb-shadow-sm: 0 1px 2px rgba(204, 51, 102, .05);
  --rb-shadow-md: 0 10px 30px rgba(204, 51, 102, .08);
  --rb-shadow-lg: 0 24px 48px -16px rgba(204, 51, 102, .28);
}

/* ── Tipografia base ─────────────────────────────────────────────── */
body,
h1, h2, h3, h4, h5, h6,
p, span, li, a, input, button, label, td, th {
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif !important;
}
h1, h2, h3, h4 { letter-spacing: -0.02em; }
h5, h6 { letter-spacing: -0.01em; }

/* =====================================================================
   HEADER / MENU — mesmo tratamento do index.html e de alternativas/
   ===================================================================== */
.tra-menu .wsmainfull.scroll,
.white-menu .wsmainfull.scroll {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 1px 0 rgba(187, 38, 73, 0.08), 0 4px 24px rgba(0, 0, 0, 0.06) !important;
  border-bottom: 1px solid rgba(187, 38, 73, 0.1);
}
.tra-menu.navbar-light .scroll .wsmenu > .wsmenu-list > li > a:not(.last-link):hover {
  color: var(--rb-magenta) !important;
}
.navbar-light .wsmenu > .wsmenu-list > li > a:not(.last-link) {
  font-size: 0.875rem; font-weight: 500; letter-spacing: 0.2px; transition: color 0.18s;
}
.wsmenu-list .last-link,
.wsmenu-list li a.last-link {
  background: linear-gradient(135deg, #cc3366 0%, #a02050 100%) !important;
  color: #fff !important; border: none !important; border-radius: 30px !important;
  padding: 9px 22px !important; font-size: 0.875rem !important; font-weight: 600 !important;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 14px rgba(187, 38, 73, 0.28) !important;
  transition: box-shadow 0.2s, transform 0.2s !important;
}
.wsmenu-list .last-link:hover,
.wsmenu-list li a.last-link:hover {
  box-shadow: 0 6px 20px rgba(187, 38, 73, 0.38) !important;
  transform: translateY(-1px); color: #fff !important;
}
#rb-nav-close { display: none; }

@media (max-width: 991px) {
  .wsmobileheader { z-index: 99999 !important; }
  #rb-nav-close {
    display: none; position: fixed; top: 14px; right: 16px; z-index: 99999;
    width: 40px; height: 40px; background: rgba(255, 255, 255, 0.18);
    border: 1.5px solid rgba(255, 255, 255, 0.3); border-radius: 50%;
    color: #fff; font-size: 1rem; cursor: pointer;
    align-items: center; justify-content: center; line-height: 1;
  }
  .wsactive #rb-nav-close { display: flex; }
  .wsmobileheader {
    background: linear-gradient(135deg, #d95075 0%, #cc3366 100%) !important;
    border-bottom: none !important; box-shadow: 0 4px 24px rgba(139, 28, 60, 0.4) !important;
    height: 62px !important;
  }
  .wsmobileheader .smllogo {
    position: absolute !important; top: 50% !important;
    transform: translateY(-50%) !important; padding-left: 20px !important; margin-top: 0 !important;
  }
  .wsmobileheader .smllogo img {
    height: 30px !important; width: auto !important; display: block !important;
    filter: brightness(0) invert(1);
  }
  .wsanimated-arrow {
    top: 50% !important; transform: translateY(-50%) !important;
    right: 16px !important; margin: 0 !important; padding: 0 !important;
    width: 42px !important; height: 42px !important;
    background: rgba(255, 255, 255, 0.16) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.3) !important; border-radius: 12px !important;
  }
  .wsanimated-arrow span {
    position: absolute !important; top: 20px !important; left: 11px !important;
    width: 20px !important; height: 2px !important; background: #fff !important; border-radius: 2px !important;
  }
  .wsanimated-arrow span::before {
    top: -7px !important; left: 0 !important; width: 20px !important; height: 2px !important;
    background: #fff !important; border-radius: 2px !important; content: "" !important;
    position: absolute !important; display: block !important;
  }
  .wsanimated-arrow span::after {
    bottom: -7px !important; left: 0 !important; width: 13px !important; height: 2px !important;
    background: #fff !important; border-radius: 2px !important; content: "" !important;
    position: absolute !important; display: block !important;
  }
  .wsactive .wsanimated-arrow span { background-color: transparent !important; }
  .wsactive .wsanimated-arrow span::before { top: -2px !important; left: -1px !important; width: 20px !important; }
  .wsactive .wsanimated-arrow span::after { bottom: auto !important; top: -2px !important; left: -1px !important; width: 20px !important; }
  .wsactive .wsmenucontainer { margin-right: 0 !important; }
  .wsactive .wsmobileheader { margin-right: 0 !important; }
  .wsactive .wsmenu .overlapblackbg { opacity: 0 !important; visibility: hidden !important; }
  .wsmenu {
    position: fixed !important; top: 0 !important; left: 0 !important;
    width: 100vw !important; height: 100vh !important; z-index: 99990 !important; pointer-events: none;
  }
  .wsactive .wsmenu { visibility: visible !important; pointer-events: auto; }
  .wsmenu > .wsmenu-list {
    position: fixed !important; top: 0 !important; left: 0 !important;
    width: 100vw !important; height: 100vh !important; margin: 0 !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: linear-gradient(160deg, #e0507a 0%, #cc3366 100%) !important;
    padding-top: 80px !important; text-align: left !important;
    overflow-y: auto !important; z-index: 99990 !important;
  }
  .wsactive .wsmenu > .wsmenu-list { transform: translateX(0) !important; }
  .wsmenu > .wsmenu-list::before { display: none !important; }
  body.wsactive .wsmenu > .wsmenu-list > li > a,
  body.wsactive .nav-violet-red-hover .wsmenu-list > li > a,
  body.wsactive .nav-violet-red-hover .wsmenu-list > li > a:hover,
  body.wsactive .nav-violet-red-hover .wsmenu-list > li:hover > a { color: #fff !important; }
  .wsactive .wsmenu > .wsmenu-list > li > a {
    font-size: 1.05rem !important; font-weight: 500 !important;
    padding: 17px 28px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    letter-spacing: 0.2px; background: transparent !important;
  }
  .wsactive .wsmenu > .wsmenu-list > li:first-child > a { border-top: 1px solid rgba(255, 255, 255, 0.15) !important; }
  .wsactive .wsmenu > .wsmenu-list > li > a:active { background: rgba(255, 255, 255, 0.12) !important; }
  .wsmenu > .wsmenu-list > li:last-child,
  .wsmenu > .wsmenu-list > li:last-child > a.last-link {
    border: none !important; border-top: none !important; border-bottom: none !important; background: transparent !important;
  }
  .wsmenu > .wsmenu-list > li:last-child > a.last-link {
    display: block !important; margin: 24px 24px 32px !important;
    padding: 15px 28px !important; background: #fff !important;
    color: #cc3366 !important; border-radius: 30px !important;
    font-weight: 700 !important; font-size: 1rem !important;
    text-align: center !important; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2) !important; line-height: 2 !important;
  }
}

/* =====================================================================
   HERO DO ARTIGO
   ===================================================================== */
.article-hero {
  position: relative;
  overflow: hidden;
  padding: 132px 0 72px;
  background:
    radial-gradient(120% 140% at 12% 0%, #dd4f81 0%, #cc3366 46%, #8a1a44 100%);
}
.article-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(closest-side at 85% 20%, rgba(255, 255, 255, .18), transparent 70%);
  pointer-events: none;
}
.article-hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .10) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.55), transparent 75%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.55), transparent 75%);
  pointer-events: none;
}
.article-hero .container { position: relative; z-index: 1; }

.article-hero .breadcrumb {
  display: inline-flex; align-items: center; flex-wrap: wrap;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  padding: 6px 16px; margin-bottom: 22px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  font-size: .82rem; line-height: 1;
}
.article-hero .breadcrumb-item,
.article-hero .breadcrumb-item a { color: rgba(255, 255, 255, .92); text-decoration: none; }
.article-hero .breadcrumb-item a:hover { color: #fff; text-decoration: underline; }
.article-hero .breadcrumb-item.active { color: #fff; font-weight: 700; }
.article-hero .breadcrumb-item + .breadcrumb-item::before {
  content: "\203A" !important;
  float: none; padding: 0 8px;
  color: rgba(255, 255, 255, .55);
}

.article-hero h1 {
  color: #fff; font-weight: 800;
  font-size: clamp(1.95rem, 1.25rem + 2.6vw, 2.9rem);
  line-height: 1.18; margin-bottom: 18px; max-width: 20ch;
}
.article-hero .col-lg-9 h1,
.article-hero .col-lg-8 h1 { max-width: 24ch; }
.article-meta {
  color: rgba(255, 255, 255, .78);
  font-size: .9rem; font-weight: 500; margin-bottom: 0;
}

/* =====================================================================
   CORPO DO ARTIGO
   ===================================================================== */
.article-body { padding: 64px 0 88px; }

.article-body h2 {
  position: relative;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.8rem);
  font-weight: 800; color: var(--rb-ink);
  margin-top: 58px; margin-bottom: 20px;
  padding-bottom: 0; border-bottom: 0;
}
.article-body h2::before {
  content: ""; display: block;
  width: 46px; height: 4px; border-radius: 3px;
  background: linear-gradient(90deg, var(--rb-magenta), #e5729a);
  margin-bottom: 16px;
}
.article-body h3 {
  font-size: 1.18rem; font-weight: 700; color: #2a2a2a;
  margin-top: 34px; margin-bottom: 13px;
}
.article-body p { font-size: 1.05rem; line-height: 1.8; color: var(--rb-text); margin-bottom: 18px; }
.article-body ul, .article-body ol { padding-left: 24px; margin-bottom: 22px; }
.article-body ul { list-style: disc; }
.article-body li { font-size: 1.05rem; line-height: 1.75; color: var(--rb-text); margin-bottom: 9px; }
.article-body li::marker { color: var(--rb-magenta); }
.article-body strong { color: var(--rb-ink); font-weight: 700; }
.article-body a:not(.btn):not(.btn-cta):not(.btn-sidebar):not(.competitor-tab):not(.download-btn) {
  color: var(--rb-magenta); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(204, 51, 102, .32);
  transition: text-decoration-color .15s;
}
.article-body a:not(.btn):not(.btn-cta):not(.btn-sidebar):not(.competitor-tab):not(.download-btn):hover {
  text-decoration-color: var(--rb-magenta);
}

.article-lead {
  font-size: 1.15rem; line-height: 1.75; color: #333;
  border-left: 4px solid var(--rb-magenta);
  background: linear-gradient(180deg, var(--rb-rose-bg), rgba(253, 246, 248, .4));
  border-radius: 0 12px 12px 0;
  padding: 18px 22px; margin-bottom: 38px; font-weight: 400;
}

/* ── Caixas de destaque ──────────────────────────────────────────── */
.highlight-box,
.tip-box,
.warning-box {
  border-radius: 14px;
  padding: 20px 24px;
  margin: 30px 0;
  box-shadow: var(--rb-shadow-sm);
}
.highlight-box {
  background: linear-gradient(180deg, #fdf1f5, #fdf7f9);
  border: 1px solid var(--rb-rose-border);
  border-left: 4px solid var(--rb-magenta);
}
.highlight-box p, .tip-box p, .warning-box p { margin-bottom: 0; color: #333; }
.highlight-box strong { color: var(--rb-magenta-deep); }

.tip-box {
  background: linear-gradient(180deg, #eef5ff, #f5f9ff);
  border: 1px solid #d5e4f7;
  border-left: 4px solid #3b82f6;
}
.tip-box strong { color: #1d4ed8; }

.warning-box {
  background: linear-gradient(180deg, #fff8ec, #fffaf2);
  border: 1px solid #f2e2c4;
  border-left: 4px solid #e0932b;
}
.warning-box strong { color: #b45309; }

/* ── Stat cards ──────────────────────────────────────────────────── */
.stat-row { display: flex; gap: 16px; margin: 34px 0; flex-wrap: wrap; }
.stat-card {
  position: relative;
  background: #fff !important;
  color: var(--rb-ink) !important;
  border: 1px solid var(--rb-rose-border);
  border-radius: var(--rb-radius);
  padding: 24px 20px; text-align: center;
  flex: 1; min-width: 130px;
  box-shadow: var(--rb-shadow-md);
  overflow: hidden;
}
.stat-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--rb-magenta), #e5729a);
}
.stat-card .stat-num {
  font-size: 2rem; font-weight: 800; display: block; line-height: 1.1;
  color: var(--rb-magenta);
}
.stat-card .stat-label {
  font-size: .82rem; color: var(--rb-muted); opacity: 1;
  margin-top: 8px; display: block; line-height: 1.4;
}

/* ── Tabelas ─────────────────────────────────────────────────────── */
.table-responsive { margin: 26px 0; -webkit-overflow-scrolling: touch; }
.table-responsive > table { margin: 0 !important; }
.kpi-table, .comp-table, .comparison-table, .cost-table,
.package-table, .feature-matrix {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  margin: 26px 0;
  font-size: .95rem;
  border: 1px solid var(--rb-rose-border);
  border-radius: 14px;
  overflow: hidden;
}
.kpi-table th, .comp-table th, .comparison-table th, .cost-table th,
.package-table th, .feature-matrix th {
  background: linear-gradient(135deg, var(--rb-magenta) 0%, var(--rb-magenta-deep) 100%);
  color: #fff; font-weight: 700; font-size: .82rem;
  letter-spacing: .02em;
  padding: 14px 16px; text-align: left; border: 0;
}
.kpi-table td, .comp-table td, .comparison-table td, .cost-table td,
.package-table td, .feature-matrix td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--rb-line);
  color: var(--rb-text);
}
.kpi-table tr:last-child td, .comp-table tr:last-child td,
.comparison-table tr:last-child td, .cost-table tr:last-child td,
.package-table tr:last-child td, .feature-matrix tr:last-child td { border-bottom: 0; }
.kpi-table tbody tr:nth-child(even) td, .comp-table tbody tr:nth-child(even) td,
.comparison-table tbody tr:nth-child(even) td, .cost-table tbody tr:nth-child(even) td,
.package-table tbody tr:nth-child(even) td, .feature-matrix tbody tr:nth-child(even) td {
  background: #fbf4f7;
}
.comp-table .td-relinq, .comparison-table .td-relinq { background: rgba(204, 51, 102, .06) !important; }
.comp-table td:first-child, .comparison-table td:first-child,
.feature-matrix td:first-child, .kpi-table td:first-child { font-weight: 600; color: #333; }

.check { color: #16a34a; font-weight: 700; }
.cross { color: #d4536a; font-weight: 700; }
.partial, .neutral { color: #b8860b; font-weight: 600; }
.neutral { font-size: .88rem; font-weight: 500; color: #8a8a92; }

/* ── Caixa de veredicto (era verde → paleta da marca) ────────────── */
.verdict-box {
  background: linear-gradient(135deg, var(--rb-magenta) 0%, var(--rb-magenta-dark) 100%) !important;
  color: #fff; border-radius: var(--rb-radius);
  padding: 30px 28px; margin: 34px 0; text-align: center;
  box-shadow: var(--rb-shadow-lg);
}
.verdict-box h3 { color: #fff; font-size: 1.35rem; font-weight: 800; margin-bottom: 10px; }
.verdict-box p { color: rgba(255, 255, 255, .92); margin-bottom: 0; font-size: 1.05rem; }

/* ── CTA principal ───────────────────────────────────────────────── */
.cta-box {
  background: radial-gradient(130% 150% at 8% 0%, #db5079 0%, #cc3366 52%, #7a1830 100%) !important;
  color: #fff; padding: 46px 38px; border-radius: 22px;
  text-align: center; margin: 54px 0;
  box-shadow: var(--rb-shadow-lg);
}
.cta-box h3 { color: #fff; font-size: 1.6rem; font-weight: 800; margin-bottom: 12px; }
.cta-box p { color: rgba(255, 255, 255, .92); margin-bottom: 26px; font-size: 1.05rem; }
.cta-box .btn,
.cta-box .btn-cta,
.cta-box a.btn-white {
  display: inline-block;
  background: #fff !important; color: var(--rb-magenta) !important;
  font-weight: 700; font-size: 1rem; padding: 14px 34px;
  border: 0; border-radius: 999px; text-decoration: none;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
  transition: transform .18s, box-shadow .18s;
}
.cta-box .btn:hover,
.cta-box .btn-cta:hover,
.cta-box a.btn-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .28);
  color: var(--rb-magenta) !important;
}

/* ── Sidebar ─────────────────────────────────────────────────────── */
.sidebar-cta {
  background: linear-gradient(180deg, #ffffff, #fdf4f7) !important;
  border: 1px solid var(--rb-rose-border) !important;
  border-radius: 18px; padding: 26px;
  position: sticky; top: 96px;
  box-shadow: var(--rb-shadow-md);
}
.sidebar-cta h4 { font-size: 1.08rem; font-weight: 800; color: var(--rb-ink); margin-bottom: 12px; }
.sidebar-cta p { font-size: .9rem; color: var(--rb-muted); margin-bottom: 18px; }
.sidebar-cta .btn-sidebar,
.sidebar-cta .btn-red,
.sidebar-cta a.btn {
  display: block !important;
  background: linear-gradient(135deg, var(--rb-magenta) 0%, var(--rb-magenta-deep) 100%) !important;
  color: #fff !important; text-align: center;
  padding: 13px 20px !important; border-radius: 999px !important;
  font-weight: 700; text-decoration: none; font-size: .95rem;
  box-shadow: 0 8px 20px rgba(204, 51, 102, .28);
  transition: transform .18s, box-shadow .18s;
}
.sidebar-cta .btn-sidebar:hover,
.sidebar-cta .btn-red:hover,
.sidebar-cta a.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(204, 51, 102, .36); }

.sidebar-links { list-style: none; padding: 0; margin: 18px 0 0; }
.sidebar-links li { border-bottom: 1px solid #f2dde4; }
.sidebar-links li:last-child { border-bottom: none; }
.sidebar-links li a {
  display: block; padding: 11px 0; font-size: .9rem;
  color: var(--rb-magenta) !important; text-decoration: none; font-weight: 500;
  transition: padding .15s;
}
.sidebar-links li a:hover { padding-left: 6px; }

/* ── Abas de âncora (vs concorrente) ─────────────────────────────── */
.competitor-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 38px; }
.competitor-tab {
  display: inline-block; padding: 8px 17px; border-radius: 999px;
  border: 1.5px solid var(--rb-rose-border);
  font-size: .88rem; font-weight: 600;
  color: var(--rb-magenta) !important; text-decoration: none;
  background: #fff;
  box-shadow: var(--rb-shadow-sm);
  transition: background .18s, border-color .18s, color .18s, transform .18s;
}
.competitor-tab:hover {
  background: var(--rb-magenta); color: #fff !important;
  border-color: var(--rb-magenta); transform: translateY(-1px);
}

/* ── FAQ (accordion do tema + .faq-item das alternativas) ────────── */
.accordion .accordion-item {
  background: #fff !important;
  border: 1px solid var(--rb-rose-border) !important;
  border-radius: 14px; margin-bottom: 12px;
  padding: 2px 22px;
  transition: box-shadow .2s, border-color .2s;
}
.accordion .accordion-item.is-active {
  border-color: #e7c0cf !important;
  box-shadow: 0 10px 28px rgba(204, 51, 102, .09);
}
.accordion .accordion-item.acc-last-item { border-bottom: 1px solid var(--rb-rose-border) !important; }
.accordion .accordion-thumb { padding: 20px 34px 20px 0; }
.accordion .accordion-thumb h5 { font-size: 1.02rem; font-weight: 700; color: var(--rb-ink); line-height: 1.5; }
.accordion .accordion-item .accordion-thumb:after,
.accordion .accordion-item.is-active .accordion-thumb:after { color: var(--rb-magenta); right: 4px; }
.accordion .accordion-panel { padding: 0 0 18px; }
.accordion .accordion-panel .p-lg { font-size: 1rem; line-height: 1.75; color: var(--rb-text); }

.faq-item { border-bottom: 1px solid var(--rb-rose-border); padding: 22px 0; }
.faq-item:first-of-type { border-top: 1px solid var(--rb-rose-border); }
.faq-item h3 { font-size: 1.03rem; font-weight: 700; color: var(--rb-ink); margin: 0 0 10px; }
.faq-item h3::before { content: none; }
.faq-item p { font-size: .98rem; color: #555; line-height: 1.7; margin: 0; }

.more-questions a {
  display: inline-block;
  border: 1.5px solid var(--rb-rose-border); border-radius: 999px;
  padding: 11px 26px; font-weight: 700; font-size: .92rem;
  color: var(--rb-magenta) !important; text-decoration: none;
  transition: background .18s, color .18s, border-color .18s;
}
.more-questions a:hover {
  background: var(--rb-magenta); color: #fff !important; border-color: var(--rb-magenta);
}

/* =====================================================================
   HARMONIZAÇÃO DE COMPONENTES ESPECÍFICOS DE PÁGINA
   (mantêm o layout do <style> inline; só alinhamos cor/raio/sombra)
   ===================================================================== */
.pillar-card, .criteria-card, .strategy-card, .step-card, .error-card,
.permission-card, .notif-card, .question-type-card, .feature-item,
.feature-card, .reason-card, .comp-section, .flow-step, .step-item,
.calc-box, .whatsapp-example, .checklist {
  border-color: var(--rb-rose-border) !important;
  border-radius: var(--rb-radius) !important;
}
.pillar-card, .criteria-card, .strategy-card, .step-card, .step-item,
.feature-card, .feature-item, .reason-card, .comp-section, .flow-step,
.notif-card, .error-card, .question-type-card, .permission-card {
  box-shadow: var(--rb-shadow-md);
  transition: transform .22s cubic-bezier(.16, 1, .3, 1), box-shadow .22s ease;
}
.pillar-card:hover, .criteria-card:hover, .strategy-card:hover,
.step-card:hover, .step-item:hover, .feature-card:hover, .feature-item:hover,
.reason-card:hover, .comp-section:hover, .flow-step:hover,
.notif-card:hover, .error-card:hover, .question-type-card:hover,
.permission-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(204, 51, 102, .14);
}
.stat-card { transition: transform .22s cubic-bezier(.16, 1, .3, 1), box-shadow .22s ease; }
.stat-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(204, 51, 102, .16); }

.pillar-card { border-top: 4px solid var(--rb-magenta) !important; }
.pillar-card .pillar-num,
.criteria-card .criteria-score,
.kpi-item .kpi-num { color: var(--rb-magenta); }

.strategy-number, .step-number, .step-badge, .flow-step-num,
.reason-num, .permission-num {
  background: linear-gradient(135deg, var(--rb-magenta) 0%, var(--rb-magenta-deep) 100%) !important;
  color: #fff !important;
}

.winner-badge, .feature-tag {
  background: linear-gradient(135deg, var(--rb-magenta) 0%, var(--rb-magenta-deep) 100%) !important;
  color: #fff !important;
}

/* barrinhas de nota (melhor-sistema) */
.rating-bar { background: #f0e2e8 !important; }
.rating-fill { background: linear-gradient(90deg, var(--rb-magenta), #e5729a) !important; }

/* cards vs. de comparação (comp-section header pills) */
.comp-logo-pill { background: #f4eef1 !important; color: #555 !important; }
.comp-relinq-pill,
.comp-vs { color: var(--rb-magenta); }
.comp-relinq-pill {
  background: linear-gradient(135deg, var(--rb-magenta), var(--rb-magenta-deep)) !important;
  color: #fff !important;
}

/* grid papel vs digital / relinq vs concorrente — recolore o "verde" */
.vs-card.digital, .vs-card.card-relinq, .card-relinq {
  background: #fdf1f5 !important;
  border-color: #ecc4d3 !important;
}
.vs-card.digital h3, .card-relinq h3 { color: var(--rb-magenta-deep) !important; }
.vs-grid, .vs-card { border-radius: 14px; }

/* ── Rodapé ──────────────────────────────────────────────────────── */
footer { background: #f7f4f5; }

/* ── Responsivo ──────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .article-hero { padding: 104px 0 52px; }
  .article-body { padding: 44px 0 60px; }
  .sidebar-cta { position: static; margin-top: 36px; }
}
@media (max-width: 576px) {
  .cta-box { padding: 34px 22px; }
  .stat-card { min-width: 100%; }
  .vs-grid { grid-template-columns: 1fr !important; }
}

/* =====================================================================
   ANIMAÇÕES
   - reveal ao rolar (classe .rb-anim é adicionada em <html> pelo script
     inline só quando o usuário NÃO pede movimento reduzido)
   - hover dos cards: ver bloco "HARMONIZAÇÃO" acima
   - pulso nos botões de CTA
   ===================================================================== */
.rb-anim :is(
  .article-body h2, .article-lead, .highlight-box, .tip-box, .warning-box,
  .stat-card, .pillar-card, .kpi-table, .table-responsive, .comparison-table,
  .feature-matrix, .cost-table, .package-table, .comp-section, .criteria-card,
  .strategy-card, .step-card, .step-item, .flow-step, .permission-card,
  .permission-row, .notif-card, .error-card, .question-type-card, .feature-card,
  .feature-item, .reason-card, .cta-box, .verdict-box, .calc-box,
  .whatsapp-example, .competitor-tabs, .vs-card, .faq-item, .accordion-item, .checklist, .kpi-item
) {
  transition:
    opacity .7s cubic-bezier(.16, 1, .3, 1),
    transform .7s cubic-bezier(.16, 1, .3, 1),
    box-shadow .22s ease;
}
.rb-anim :is(
  .article-body h2, .article-lead, .highlight-box, .tip-box, .warning-box,
  .stat-card, .pillar-card, .kpi-table, .table-responsive, .comparison-table,
  .feature-matrix, .cost-table, .package-table, .comp-section, .criteria-card,
  .strategy-card, .step-card, .step-item, .flow-step, .permission-card,
  .permission-row, .notif-card, .error-card, .question-type-card, .feature-card,
  .feature-item, .reason-card, .cta-box, .verdict-box, .calc-box,
  .whatsapp-example, .competitor-tabs, .vs-card, .faq-item, .accordion-item, .checklist, .kpi-item
):not(.rb-in) {
  opacity: 0;
  transform: translateY(26px);
}

/* pulso nos botões */
@keyframes rb-pulse {
  0%   { box-shadow: 0 8px 20px rgba(204, 51, 102, .28), 0 0 0 0 rgba(204, 51, 102, .42); }
  70%  { box-shadow: 0 8px 20px rgba(204, 51, 102, .28), 0 0 0 16px rgba(204, 51, 102, 0); }
  100% { box-shadow: 0 8px 20px rgba(204, 51, 102, .28), 0 0 0 0 rgba(204, 51, 102, 0); }
}
@keyframes rb-pulse-light {
  0%   { box-shadow: 0 10px 26px rgba(0, 0, 0, .22), 0 0 0 0 rgba(255, 255, 255, .55); }
  70%  { box-shadow: 0 10px 26px rgba(0, 0, 0, .22), 0 0 0 16px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 10px 26px rgba(0, 0, 0, .22), 0 0 0 0 rgba(255, 255, 255, 0); }
}
@media (prefers-reduced-motion: no-preference) {
  .sidebar-cta .btn-sidebar,
  .sidebar-cta .btn-red,
  .sidebar-cta a.btn {
    animation: rb-pulse 2.6s ease-out infinite;
  }
  .cta-box .btn,
  .cta-box .btn-cta,
  .cta-box a.btn-white {
    animation: rb-pulse-light 2.6s ease-out infinite;
  }
  .sidebar-cta .btn-sidebar:hover,
  .sidebar-cta .btn-red:hover,
  .sidebar-cta a.btn:hover,
  .cta-box .btn:hover,
  .cta-box .btn-cta:hover,
  .cta-box a.btn-white:hover {
    animation: none;
  }
}