/* Remove background inline e força fundo branco */
section.modular-hero.hero {
    background-color: white !important; /* força fundo branco */
    background-image: none !important;   /* remove qualquer background inline */
}

/* ====== barra e container */
.section.navbar { border-bottom:1px solid #eee; }
.section.navbar .container { display:flex; align-items:center; gap:24px; padding:10px 16px; }
.section.navbar .navbar-section.logo { margin-right:auto; }

/* ====== lista do menu (desktop) */
.section.navbar .desktop-menu nav.dropmenu > ul {
  display:flex; align-items:center; gap:22px; margin:0; padding:0; list-style:none;
}

/* tira o azul do ativo do Quark */
.section.navbar .desktop-menu nav.dropmenu > ul > li > a { 
  color:#111 !important; font-weight:500; text-decoration:none; 
}
.section.navbar .desktop-menu nav.dropmenu > ul > li > a:hover { opacity:.8; }

/* ====== separador “|” antes do Login (penúltimo item) */
.section.navbar .desktop-menu nav.dropmenu > ul > li:nth-last-child(2) {
  position:relative; padding-left:26px;
}
.section.navbar .desktop-menu nav.dropmenu > ul > li:nth-last-child(2)::before {
  content:"|"; color:#888; position:absolute; left:8px; top:0; bottom:0; margin:auto 0; height:1em;
}

/* ====== CTA: último item vira botão (fallback genérico) */
.section.navbar .desktop-menu nav.dropmenu > ul > li:last-child > a {
  display:inline-block; padding:10px 16px; border-radius:999px;
  background:#ff9800; color:#fff !important; font-weight:700;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.section.navbar .desktop-menu nav.dropmenu > ul > li:last-child > a:hover {
  transform:translateY(-1px); box-shadow:0 6px 14px rgba(0,0,0,.16);
}

/* ====== (opcional) se preferir fixar pelo href, ativa este bloco também */
.section.navbar .desktop-menu nav.dropmenu > ul > li > a[href*="serifyapp.com/app"] {
  display:inline-block; padding:10px 16px; border-radius:999px;
  background:#ff9800; color:#fff !important; font-weight:700;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.section.navbar .desktop-menu nav.dropmenu > ul > li > a[href*="serifyapp.com/app"]:hover {
  transform:translateY(-1px); box-shadow:0 6px 14px rgba(0,0,0,.16);
}

/* ====== marca “SERIFY” laranja */
.section.navbar .navbar-section.logo,
.section.navbar .navbar-section.logo a { display:flex; align-items:center; gap:10px; text-decoration:none; }
.section.navbar .navbar-section.logo .logo, 
.section.navbar .navbar-section.logo img { height:34px; }
.section.navbar .navbar-section.logo .site-title,
.section.navbar .navbar-section.logo span { font-weight:800; color:#e65100; letter-spacing:.5px; }

/* ====== dropdowns herdando a cor */
.section.navbar .desktop-menu nav.dropmenu li ul a { color:#111 !important; }

/* ====== mobile */
.mobile-menu { border-top:1px solid #eee; }
.mobile-menu nav.dropmenu > ul > li > a[href*="serifyapp.com/app"],
.mobile-menu nav.dropmenu > ul > li:last-child > a {
  display:block; margin:8px 0 0; text-align:center;
  background:#ff9800; color:#fff !important; border-radius:999px; padding:12px 16px; font-weight:700;
}
@media (max-width: 900px) {
  .section.navbar .desktop-menu .divider,
  .section.navbar .desktop-menu nav.dropmenu > ul > li:nth-last-child(2)::before { display:none; }
}





.s-content-title{font-size:clamp(32px,4vw,56px);font-weight:800;line-height:1.1;margin-bottom:.4rem}
.text-large{max-width:860px;opacity:.9;font-size:18px}

.toc, .gtd-toc{position:sticky;top:24px}
.toc{list-style:none;padding:0;margin:0}
.toc li{margin:.4rem 0}
.toc a{text-decoration:none;opacity:.85}
.toc a:hover{opacity:1}

article h2{font-size:32px;font-weight:800;margin:32px 0 12px}
article p{line-height:1.7}

/* Isso vai forçar a margem negativa na div que contém o texto */
.custom-blog-wrapper > div {
    margin-top: -109px !important;
    position: relative;
    z-index: 10; /* Garante que fique por cima da imagem se necessário */
}


.hero {
    display: -ms-flexbox;
    display: flex;
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-position: center;
    background-size: cover;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
}
#breadcrumbs a:first-child, #breadcrumbs span:first-child {
    padding-left: 0;
    display: none;
}