/* ==========================================================================
   PORTAL OFICIAL PROFESSOR JOSIAS MOURA (professorjosiasmoura.com)
   EFEITOS VISUAIS AVANÇADOS, MICROINTERAÇÕES E TRANSIÇÕES 3D (PHP / LOCALHOST)
   Transferidos e adaptados fielmente a partir do WordPress original
   ========================================================================== */

/* --- 1. BARRA DE PROGRESSO DE LEITURA DOURADA COM GLOW --- */
#josias-reading-progress,
.reading-progress span {
  background: linear-gradient(90deg, #D4B15A 0%, #F5D77F 50%, #B8923D 100%) !important;
  box-shadow: 0 0 12px rgba(212, 177, 90, 0.75) !important;
  height: 4px !important;
  border-radius: 0 2px 2px 0 !important;
  transition: width 0.1s ease-out, transform 0.1s ease-out !important;
}

/* --- 2. BOTÃO "ASSINAR O SITE" E BOTÕES DOURADOS PREMIUM --- */
.subscribe-box button,
.gold-button,
.btn-gold-pro {
  background: linear-gradient(135deg, #F3C23E 0%, #D4A32C 50%, #B8851B 100%) !important;
  color: #0A2147 !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0.3px !important;
  border-radius: 8px !important;
  padding: 13px 26px !important;
  box-shadow: 0 4px 16px rgba(212, 177, 90, 0.42) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Feixe de luz contínuo (Shimmer animado) */
.subscribe-box button::after,
.gold-button::after,
.btn-gold-pro::after {
  content: "" !important;
  position: absolute !important;
  top: -50% !important;
  left: -120% !important;
  width: 50% !important;
  height: 200% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent) !important;
  transform: rotate(25deg) !important;
  pointer-events: none !important;
  animation: josiasShimmer 4s infinite ease-in-out !important;
}

@keyframes josiasShimmer {
  0% { left: -120%; }
  22% { left: 150%; }
  100% { left: 150%; }
}

.subscribe-box button:hover,
.gold-button:hover,
.btn-gold-pro:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 28px rgba(212, 177, 90, 0.68) !important;
  color: #051329 !important;
}

.subscribe-box button:active,
.gold-button:active,
.btn-gold-pro:active {
  transform: scale(0.97) !important;
  box-shadow: 0 2px 8px rgba(212, 177, 90, 0.3) !important;
}

/* --- 3. DESTAQUE PRINCIPAL DE NOTÍCIAS & ATUALIDADES COM RESUMO INTELIGENTE E IA --- */
.post-card.card-feature {
  display: grid !important;
  grid-template-columns: 42% 1fr !important;
  gap: 32px !important;
  align-items: center !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(10, 33, 71, 0.12) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  box-shadow: 0 4px 18px rgba(10, 33, 71, 0.06) !important;
  margin-bottom: 12px !important;
}

.card-feature .card-image {
  margin: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.card-feature .card-copy {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 4px 0 !important;
}

.card-feature h3 {
  font-family: Montserrat, Arial, sans-serif !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  color: #0A2147 !important;
  margin: 0 0 10px 0 !important;
}

.card-feature .meta {
  font-size: 13px !important;
  color: #64748B !important;
  margin: 0 0 14px 0 !important;
}

.card-feature .excerpt {
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: #334155 !important;
  margin: 0 0 20px 0 !important;
  font-weight: 400 !important;
}

.card-feature .read-more,
.card-small .read-more,
.read-more:not(.btn-leia-mais-cristao):not(.card-cover .read-more):not(.card-product .read-more) {
  background: linear-gradient(135deg, #0A2147 0%, #173D7A 100%) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
  border-radius: 6px !important;
  padding: 11px 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: 0 4px 14px rgba(10, 33, 71, 0.25) !important;
  border: 1px solid rgba(212, 177, 90, 0.35) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  text-decoration: none !important;
  width: fit-content !important;
  margin-top: 4px !important;
}

.card-feature .read-more:hover,
.card-small .read-more:hover,
.read-more:not(.btn-leia-mais-cristao):not(.card-cover .read-more):not(.card-product .read-more):hover {
  background: linear-gradient(135deg, #173D7A 0%, #0A2147 100%) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(10, 33, 71, 0.4) !important;
  border-color: #D4B15A !important;
}

/* Feixe de luz no hover de botões secundários */
.card-feature .read-more::before,
.card-small .read-more::before,
.card-product .read-more::before,
.card-cover .read-more::before,
.btn-leia-mais-cristao::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 60% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent) !important;
  transform: skewX(-25deg) !important;
  transition: left 0.6s ease !important;
  pointer-events: none !important;
}

.card-feature .read-more:hover::before,
.card-small .read-more:hover::before,
.card-product .read-more:hover::before,
.card-cover .read-more:hover::before,
.btn-leia-mais-cristao:hover::before {
  left: 140% !important;
}

/* --- 4. BOTÃO PÍLULA ANIMADO "LEIA MAIS →" NOS CARDS CRISTÃOS --- */
.btn-leia-mais-cristao,
.card-christian .read-more {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  margin-top: 14px !important;
  margin-bottom: 6px !important;
  padding: 8px 20px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #0A2147 !important;
  background: #F8FAFC !important;
  border: 1.5px solid #0A2147 !important;
  border-radius: 20px !important;
  transition: all 0.32s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(10, 33, 71, 0.08) !important;
  width: fit-content !important;
  position: relative !important;
  overflow: hidden !important;
}

.btn-leia-mais-cristao span.arrow,
.card-christian .read-more span.arrow {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  display: inline-block !important;
}

.btn-leia-mais-cristao:hover,
.card-christian .read-more:hover {
  background: linear-gradient(135deg, #0A2147 0%, #173D7A 100%) !important;
  color: #FFFFFF !important;
  border-color: #D4B15A !important;
  transform: translateY(-3px) scale(1.04) !important;
  box-shadow: 0 8px 22px rgba(10, 33, 71, 0.32), 0 0 14px rgba(212, 177, 90, 0.55) !important;
}

.btn-leia-mais-cristao:hover span.arrow,
.card-christian .read-more:hover span.arrow {
  transform: translateX(6px) !important;
}

/* --- 5. LOJA ONLINE (PRODUTOS & REVISTAS DIGITAIS): 3 COLUNAS NO DESKTOP, 1 NO CELULAR, IMAGEM EM CIMA, TÍTULO E BOTÃO EMBAIXO --- */
.product-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 30px 24px !important;
}

.card-product {
  display: flex !important;
  flex-direction: column !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(10, 33, 71, 0.09) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  padding: 20px !important;
  box-shadow: 0 4px 18px rgba(10, 33, 71, 0.05) !important;
  transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1),
              box-shadow 0.35s cubic-bezier(0.165, 0.84, 0.44, 1),
              border-color 0.35s ease !important;
  box-sizing: border-box !important;
}

.card-product .card-image {
  width: 100% !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  display: block !important;
  background: #F4F6F9 !important;
  margin: 0 0 16px 0 !important;
}

.card-product img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 12px !important;
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.card-product .card-copy {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  justify-content: space-between !important;
  align-items: center !important;
  text-align: center !important;
  padding: 12px 8px 6px !important;
  gap: 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.card-product h3 {
  font-family: Arial, sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: #102644 !important;
  margin: 0 !important;
  text-align: center !important;
}

.card-product h3 a {
  color: #102644 !important;
  text-decoration: none !important;
  transition: color 0.25s ease !important;
}

.card-product h3 a:hover {
  color: #B8851B !important;
}

/* Botões com respiro e distância ampla em relação à imagem */
.card-product .read-more {
  background: linear-gradient(135deg, #0A2147 0%, #173D7A 100%) !important;
  color: #FFFFFF !important;
  border: 1.5px solid rgba(212, 177, 90, 0.45) !important;
  border-radius: 30px !important;
  padding: 12px 28px !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 4px 14px rgba(10, 33, 71, 0.22) !important;
  transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  margin-top: 18px !important;
  align-self: center !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

/* Carrossel de Destaques: Respiro visual e botão bem destacado da imagem */
.card-cover .card-image {
  margin-bottom: 16px !important;
}

.card-cover .read-more {
  background: linear-gradient(135deg, #0A2147 0%, #173D7A 100%) !important;
  color: #FFFFFF !important;
  border: 1.5px solid rgba(212, 177, 90, 0.45) !important;
  border-radius: 30px !important;
  padding: 12px 28px !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 4px 14px rgba(10, 33, 71, 0.22) !important;
  transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  margin-top: 22px !important;
  margin-bottom: 12px !important;
  align-self: center !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.card-product .read-more:hover,
.card-cover .read-more:hover {
  background: linear-gradient(135deg, #D4B15A 0%, #B8851B 100%) !important;
  color: #0A2147 !important;
  border-color: #FFFFFF !important;
  transform: translateY(-3px) scale(1.025) !important;
  box-shadow: 0 12px 26px rgba(184, 133, 27, 0.45), 0 0 18px rgba(212, 177, 90, 0.5) !important;
}

/* --- GARANTIA DE VISIBILIDADE PERMANENTE DE TODAS AS SEÇÕES (MOBILE, TABLET E DESKTOP) --- */
.section,
.courses,
.services-section,
.store-section,
.invitation,
.all-posts,
.intro,
.home-paper,
.product-grid,
.news-grid,
.compact-grid,
.christian-grid,
.post-card {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .post-card.card-feature {
    display: grid !important;
    grid-template-columns: 44% 1fr !important;
    gap: 24px !important;
    padding: 20px !important;
  }
  .card-feature h3 {
    font-size: 19px !important;
  }
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }
  .compact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
  .christian-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
}

@media (max-width: 767px) {
  /* Destaque Principal de Notícias & Atualidades em Tela Cheia no Celular (Ponta a Ponta) */
  .post-card.card-feature {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    margin-bottom: 22px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 18px rgba(10, 33, 71, 0.08) !important;
  }
  .post-card.card-feature .card-image {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    display: block !important;
  }
  .post-card.card-feature .card-image img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/9 !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
  }
  .post-card.card-feature .card-copy {
    display: flex !important;
    flex-direction: column !important;
    padding: 20px 18px 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .post-card.card-feature h3 {
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    margin: 0 0 10px 0 !important;
  }
  .post-card.card-feature .meta {
    font-size: 13px !important;
    color: #64748B !important;
    margin: 0 0 12px 0 !important;
  }
  .post-card.card-feature .excerpt {
    font-size: 15px !important;
    line-height: 1.65 !important;
    color: #334155 !important;
    margin: 0 0 18px 0 !important;
  }
  .post-card.card-feature .read-more {
    align-self: flex-start !important;
    display: inline-flex !important;
    padding: 11px 22px !important;
  }

  /* Loja online no celular em UMA COLUNA SÓ (Capa em cima centralizada, título e botão abaixo) */
  .store-section .product-grid,
  .product-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    max-width: 440px !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .card-product {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 22px 18px !important;
    border-radius: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 18px rgba(10, 33, 71, 0.06) !important;
  }
  .card-product .card-image {
    max-width: 260px !important;
    width: 100% !important;
    margin: 0 auto 16px auto !important;
    display: block !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }
  .card-product .card-image img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
  }
  .card-product .card-copy {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 4px 0 0 0 !important;
    gap: 12px !important;
  }
  .card-product h3 {
    font-size: 18px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    text-align: center !important;
  }
  .card-product .read-more {
    padding: 12px 28px !important;
    font-size: 14px !important;
    margin: 8px auto 0 auto !important;
    display: inline-flex !important;
    align-self: center !important;
  }
}


/* --- 6. BOTÃO "CARREGAR MAIS PUBLICAÇÕES" --- */
.more-button {
  background: #FFFFFF !important;
  color: #0A2147 !important;
  border: 1.5px solid #0A2147 !important;
  border-radius: 25px !important;
  padding: 12px 34px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 3px 10px rgba(10, 33, 71, 0.08) !important;
  transition: all 0.32s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  display: table !important;
  margin: 34px auto 0 !important;
  text-decoration: none !important;
}

.more-button:hover {
  background: linear-gradient(135deg, #0A2147 0%, #173D7A 100%) !important;
  color: #FFFFFF !important;
  border-color: #D4B15A !important;
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 10px 24px rgba(10, 33, 71, 0.3), 0 0 15px rgba(212, 177, 90, 0.45) !important;
}

/* --- 7. BOTÃO "ACESSE TODAS AS NOSSAS PUBLICAÇÕES..." (/arquivo/) --- */
.all-posts .navy-button {
  background: linear-gradient(135deg, #0A2147 0%, #173D7A 100%) !important;
  color: #FFFFFF !important;
  border-radius: 28px !important;
  padding: 14px 34px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(10, 33, 71, 0.25) !important;
  border: 1px solid rgba(212, 177, 90, 0.35) !important;
  transition: all 0.35s ease !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.all-posts .navy-button:hover {
  background: linear-gradient(135deg, #D4B15A 0%, #B8851B 100%) !important;
  color: #0A2147 !important;
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 14px 30px rgba(184, 133, 27, 0.48) !important;
  border-color: #FFFFFF !important;
}

/* --- 8. PÍLULAS DE ATALHOS RÁPIDOS (INTRO) --- */
.quick-links a {
  border-radius: 30px !important;
  padding: 10px 22px !important;
  border: 1.5px solid rgba(10, 33, 71, 0.15) !important;
  color: #0A2147 !important;
  font-weight: 700 !important;
  display: inline-block !important;
  transition: all 0.28s ease !important;
  background-color: #FFFFFF !important;
  text-decoration: none !important;
  box-shadow: 0 3px 12px rgba(10, 33, 71, 0.06) !important;
}

.quick-links a:hover {
  background-color: #0A2147 !important;
  color: #FFFFFF !important;
  border-color: #0A2147 !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 20px rgba(10, 33, 71, 0.22) !important;
}

/* --- 9. EFEITO 3D AVANÇADO E REALCE DOURADO EM TODOS OS CARDS --- */
.post-card,
.card-feature,
.card-small,
.card-compact,
.card-christian,
.card-product,
.archive-row,
.service-card-modern,
.cover-track > .post-card {
  transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1),
              box-shadow 0.35s cubic-bezier(0.165, 0.84, 0.44, 1),
              border-color 0.35s ease,
              background 0.35s ease !important;
  position: relative !important;
  will-change: transform, box-shadow !important;
  border: 1px solid rgba(10, 33, 71, 0.08) !important;
  border-radius: 14px !important;
}

.post-card:not(.card-cover):hover,
.card-feature:hover,
.card-small:hover,
.card-compact:hover,
.card-christian:hover,
.card-product:hover,
.archive-row:hover,
.service-card-modern:hover {
  transform: translateY(-6px) scale(1.008) !important;
  border-color: #D4B15A !important;
  box-shadow: 0 16px 36px -8px rgba(10, 33, 71, 0.16),
              0 6px 16px -2px rgba(10, 33, 71, 0.08),
              0 0 0 2px #D4B15A !important;
  z-index: 10 !important;
}

/* Elevação no carrossel de destaques */
.cover-track > .post-card:hover {
  transform: translateY(-4px) scale(1.015) !important;
  box-shadow: 0 14px 30px rgba(10, 33, 71, 0.18), 0 0 0 2px #D4B15A !important;
}

/* --- 10. MICRO-ZOOM CINEMATOGRÁFICO NAS IMAGENS AO PASSAR O MOUSE --- */
.card-image,
.card-feature .card-image,
.card-small .card-image,
.card-compact .card-image,
.card-christian .card-image,
.card-product .card-image,
.archive-thumb {
  overflow: hidden !important;
  border-radius: 12px !important;
  position: relative !important;
}

.card-image img,
.card-feature img,
.card-small img,
.card-compact img,
.card-christian img,
.card-product img,
.archive-thumb img {
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1) !important;
  display: block !important;
}

.post-card:hover .card-image img,
.card-feature:hover img,
.card-small:hover img,
.card-compact:hover img,
.card-christian:hover img,
.card-product:hover img,
.archive-row:hover .archive-thumb img {
  transform: scale(1.048) !important;
}

/* --- 11. TEXTURA SUTIL DE ÍCONES NO FUNDO (3.8% OPACIDADE) --- */
#noticias,
#gerais,
#artigocristao,
#nossos_servicos,
#destaques {
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22240%22%20height%3D%22240%22%20viewBox%3D%220%200%20240%20240%22%3E%3Cg%20transform%3D%22translate%2825%2C25%29%22%20stroke%3D%22%23173D7A%22%20stroke-width%3D%221.2%22%20fill%3D%22none%22%20opacity%3D%220.038%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%203h6a3%203%200%200%201%203%203v12a2%202%200%200%200-2-2H2z%22/%3E%3Cpath%20d%3D%22M20%203h-6a3%203%200%200%200-3%203v12a2%202%200%200%201%202-2h7z%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%28145%2C30%29%22%20stroke%3D%22%23173D7A%22%20stroke-width%3D%221.2%22%20fill%3D%22none%22%20opacity%3D%220.038%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%208l10-5%2010%205-10%205z%22/%3E%3Cpath%20d%3D%22M6%2010.5v5c0%202.5%202.7%204.5%206%204.5s6-2%206-4.5v-5%22/%3E%3Cpath%20d%3D%22M22%208v5%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2885%2C90%29%22%20stroke%3D%22%23173D7A%22%20stroke-width%3D%221.2%22%20fill%3D%22none%22%20opacity%3D%220.038%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%223%22/%3E%3Ccircle%20cx%3D%222%22%20cy%3D%2210%22%20r%3D%221.5%22/%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2210%22%20r%3D%221.5%22/%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%222%22%20r%3D%221.5%22/%3E%3Cpath%20d%3D%22M3.5%2010h3.5m6%200h3.5M10%203.5V7%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2830%2C150%29%22%20stroke%3D%22%23173D7A%22%20stroke-width%3D%221.2%22%20fill%3D%22none%22%20opacity%3D%220.038%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2018h4m-3%203h2%22/%3E%3Cpath%20d%3D%22M7%209a4%204%200%201%201%208%200c0%201.5-.8%202.5-1.5%203.5h-5C7.8%2011.5%207%2010.5%207%209z%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%28155%2C145%29%22%20stroke%3D%22%23173D7A%22%20stroke-width%3D%221.2%22%20fill%3D%22none%22%20opacity%3D%220.038%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%2210%22%20y1%3D%222%22%20x2%3D%2210%22%20y2%3D%2218%22/%3E%3Cline%20x1%3D%224%22%20y1%3D%227%22%20x2%3D%2216%22%20y2%3D%227%22/%3E%3C/g%3E%3C/svg%3E') !important;
  background-repeat: repeat !important;
  background-size: 240px 240px !important;
}

/* --- 12. LINHA DECORATIVA DOURADA EM TÍTULOS DE SEÇÃO --- */
.section-title {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  font-family: Montserrat, Arial, sans-serif !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #0A2147 !important;
  letter-spacing: -0.4px !important;
}

.section-title::after {
  content: "" !important;
  flex: 1 !important;
  height: 3.5px !important;
  background: linear-gradient(90deg, #D4B15A, #B8851B, transparent) !important;
  border-radius: 2px !important;
  border-bottom: none !important;
}

/* --- 13. SEÇÃO DE SOLUÇÕES DIGITAIS / SERVIÇOS --- */
.services-section {
  background: #FFFFFF !important;
  border-radius: 24px !important;
  padding: 40px 28px !important;
  margin: 36px auto 55px !important;
  box-shadow: 0 4px 20px rgba(10, 33, 71, 0.06) !important;
  border: 1px solid rgba(10, 33, 71, 0.1) !important;
}

.services-section > .section-title {
  background: transparent !important;
  color: #0A2147 !important;
  padding: 0 !important;
  margin-bottom: 28px !important;
  font-family: Montserrat, Arial, sans-serif !important;
  font-size: 28px !important;
  font-weight: 800 !important;
}

.services-section > .section-title::after {
  background: linear-gradient(90deg, #D4B15A, #B8851B, transparent) !important;
}

/* --- 14. CURSOS ONLINE (FUNDO MARINHO) --- */
.courses {
  background: linear-gradient(135deg, #0A2147 0%, #173D7A 100%) !important;
  border-radius: 20px !important;
  box-shadow: 0 14px 34px rgba(10, 33, 71, 0.25) !important;
  border: 1px solid rgba(212, 177, 90, 0.3) !important;
}

/* --- 15. REDUÇÃO DE MOVIMENTO (ACESSIBILIDADE) --- */
@media (prefers-reduced-motion: reduce) {
  .post-card,
  .card-feature,
  .card-small,
  .card-compact,
  .card-christian,
  .card-product,
  .archive-row,
  .card-image img,
  .card-feature img,
  .card-small img,
  .card-compact img,
  .card-christian img,
  .card-product img,
  .archive-thumb img,
  .subscribe-box button,
  .gold-button,
  .read-more,
  .btn-leia-mais-cristao,
  .more-button,
  .quick-links a {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   21. ELEVAÇÃO E VISIBILIDADE DO CABEÇALHO E MENU PRINCIPAL
   ========================================================================== */
.site-header {
  position: relative !important;
  z-index: 1000 !important;
  overflow: visible !important;
}

.header-grid {
  position: relative !important;
  z-index: 1001 !important;
  overflow: visible !important;
}

.header-menu {
  position: relative !important;
  z-index: 1002 !important;
  overflow: visible !important;
}

.primary-menu {
  z-index: 100000 !important;
  width: 275px !important;
  max-width: calc(100vw - 30px) !important;
  max-height: calc(100vh - 75px) !important;
  overflow-y: auto !important;
  padding: 6px !important;
  border-radius: 12px !important;
  border: 1.5px solid rgba(212, 177, 90, 0.45) !important;
  background: #FFFFFF !important;
  box-shadow: 0 16px 45px rgba(10, 33, 71, 0.32), 0 0 0 1px rgba(10, 33, 71, 0.1) !important;
}

.primary-menu a {
  display: flex !important;
  align-items: center !important;
  min-height: 33px !important;
  height: auto !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.35px !important;
  color: #0A2147 !important;
  border-radius: 6px !important;
  transition: all 0.18s ease !important;
  text-decoration: none !important;
  line-height: 1.25 !important;
}

.primary-menu a:hover {
  background: #F1F5F9 !important;
  color: #0A2147 !important;
  transform: translateX(3px) !important;
}

.primary-menu a[href*="/admin/"] {
  margin-top: 4px !important;
  border-top: 1px dashed #CBD5E1 !important;
  padding-top: 8px !important;
  font-weight: 700 !important;
  color: #B8851B !important;
  background: #FFFDF5 !important;
}

.primary-menu a[href*="/admin/"]:hover {
  background: #0A2147 !important;
  color: #F5D77F !important;
}

/* ==========================================================================
   22. MAPA DE NAVEGAÇÃO DO ARTIGO (SUMÁRIO INTERATIVO POR TÓPICOS)
   ========================================================================== */

/* Botão nos Controles (ao lado de Salvar e Imprimir) */
.btn-article-map {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: linear-gradient(135deg, #0A2147 0%, #173D7A 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid #D4B15A !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 2px 10px rgba(10, 33, 71, 0.15) !important;
  transition: all 0.25s ease !important;
}

.btn-article-map:hover {
  background: linear-gradient(135deg, #173D7A 0%, #0A2147 100%) !important;
  color: #F5D77F !important;
  box-shadow: 0 4px 14px rgba(184, 133, 27, 0.3) !important;
  transform: translateY(-2px) !important;
}

/* Overlay desativado para manter o texto 100% visível, nítido e iluminado */
.article-map-overlay {
  display: none !important;
}

/* Painel Gaveta (Drawer) com realce e borda dourada */
.article-map-drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  width: 400px !important;
  max-width: 90vw !important;
  height: 100vh !important;
  background: #FFFFFF !important;
  z-index: 9999 !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: -12px 0 38px rgba(10, 33, 71, 0.22) !important;
  border-left: 3px solid #D4B15A !important;
  transform: translateX(105%) !important;
  transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.article-map-drawer.is-open {
  transform: translateX(0) !important;
}

/* Topo do Mapa */
.article-map-header {
  background: linear-gradient(135deg, #0A2147 0%, #173D7A 100%) !important;
  color: #FFFFFF !important;
  padding: 22px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 3px solid #D4B15A !important;
}

.article-map-title-box {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.article-map-title-box .map-icon {
  font-size: 26px !important;
}

.article-map-title-box h3 {
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  font-family: Montserrat, Arial, sans-serif !important;
}

.article-map-title-box small {
  display: block !important;
  font-size: 12px !important;
  color: #F5D77F !important;
  margin-top: 3px !important;
}

.article-map-close {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
  font-size: 16px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}

.article-map-close:hover {
  background: #D4B15A !important;
  color: #0A2147 !important;
  transform: rotate(90deg) !important;
}

/* Barra de Progresso Interna */
.article-map-progress {
  padding: 12px 20px !important;
  background: #F8FAFC !important;
  border-bottom: 1px solid #E2E8F0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.article-map-progress-track {
  flex: 1 !important;
  height: 6px !important;
  background: #E2E8F0 !important;
  border-radius: 3px !important;
  overflow: hidden !important;
}

.article-map-progress-bar {
  height: 100% !important;
  width: 0% !important;
  background: linear-gradient(90deg, #B8851B 0%, #F3C23E 100%) !important;
  border-radius: 3px !important;
  transition: width 0.15s ease !important;
}

.article-map-progress-text {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #0A2147 !important;
  white-space: nowrap !important;
}

/* Área de Navegação e Lista de Tópicos */
.article-map-nav {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 16px 14px !important;
}

.article-map-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.article-map-item {
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.article-map-link {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  color: #1E293B !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  transition: all 0.2s ease !important;
}

.article-map-num {
  font-size: 11px !important;
  font-weight: 800 !important;
  background: #E2E8F0 !important;
  color: #475569 !important;
  padding: 3px 7px !important;
  border-radius: 4px !important;
  margin-top: 2px !important;
  flex-shrink: 0 !important;
}

.article-map-text {
  flex: 1 !important;
  font-weight: 600 !important;
}

/* Subníveis (H3/H4) */
.article-map-item.level-2 {
  margin-left: 18px !important;
}

.article-map-item.level-2 .article-map-link {
  font-size: 13px !important;
  background: #FFFFFF !important;
  border-style: dashed !important;
}

/* Hover e Item Ativo (ScrollSpy) */
.article-map-link:hover {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
  color: #0A2147 !important;
  transform: translateX(4px) !important;
}

.article-map-item.active .article-map-link {
  background: #EFF6FF !important;
  border-color: #D4B15A !important;
  border-left: 4px solid #D4B15A !important;
  color: #0A2147 !important;
  box-shadow: 0 2px 8px rgba(212, 177, 90, 0.2) !important;
}

.article-map-item.active .article-map-num {
  background: #0A2147 !important;
  color: #F5D77F !important;
}

/* Rodapé do Mapa */
.article-map-footer {
  padding: 16px 20px !important;
  background: #F8FAFC !important;
  border-top: 1px solid #E2E8F0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  text-align: center !important;
}

.article-map-top-btn {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0A2147 !important;
  padding: 9px 16px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.article-map-top-btn:hover {
  background: #0A2147 !important;
  color: #FFFFFF !important;
  border-color: #0A2147 !important;
}

.article-map-hint {
  font-size: 11px !important;
  color: #64748B !important;
}

/* Botão Flutuante (FAB) na Rolagem */
.fab-article-map {
  position: fixed !important;
  right: 20px !important;
  bottom: 85px !important;
  z-index: 9980 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: linear-gradient(135deg, #0A2147 0%, #173D7A 100%) !important;
  color: #FFFFFF !important;
  border: 2px solid #D4B15A !important;
  border-radius: 30px !important;
  padding: 10px 18px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 18px rgba(10, 33, 71, 0.35) !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  animation: fabFadeIn 0.3s ease-out !important;
}

.fab-article-map:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 6px 22px rgba(212, 177, 90, 0.5) !important;
  color: #F5D77F !important;
}

.fab-article-map[hidden] {
  display: none !important;
}

@keyframes fabFadeIn {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Efeito de Pulso Dourado no Título Destino */
.heading-target-pulse {
  animation: topicHighlightPulse 2s ease-out forwards !important;
}

@keyframes topicHighlightPulse {
  0% {
    background-color: rgba(243, 194, 62, 0.4) !important;
    box-shadow: 0 0 0 8px rgba(243, 194, 62, 0.35) !important;
    border-radius: 6px !important;
  }
  70% {
    background-color: rgba(243, 194, 62, 0.15) !important;
    box-shadow: 0 0 0 4px rgba(243, 194, 62, 0.15) !important;
  }
  100% {
    background-color: transparent !important;
    box-shadow: none !important;
  }
}

/* Responsividade do Mapa em Celulares */
@media (max-width: 640px) {
  .article-map-drawer {
    width: 100% !important;
    max-width: 100vw !important;
  }
  .fab-article-map {
    right: 15px !important;
    bottom: 80px !important;
    padding: 8px 14px !important;
    font-size: 12.5px !important;
  }
}

/* --- BARRA DOURADA NOS TÍTULOS DOS ARTIGOS (ESTILO EDITORIAL PROFESSOR JOSIAS) --- */
.article-content :is(h1, h2, h3, h4, .wp-block-heading):not(#toc_container *):not(.wp-block-cover *) {
  border-left: 4.5px solid #D4B15A !important;
  padding-left: 14px !important;
  line-height: 1.35 !important;
  margin-top: 36px !important;
  margin-bottom: 18px !important;
  color: #0A2147 !important;
}

/* --- CABEÇALHO E RODAPÉ DE IMPRESSÃO / SALVAR PDF --- */
.print-only {
  display: none !important;
}

@media print {
  .print-only {
    display: block !important;
  }
  .article-meta,
  .article-actions,
  .reading-tools,
  .reading-progress,
  .daily-cta,
  .article-map-drawer,
  .article-map-overlay,
  .fab-article-map {
    display: none !important;
  }
  .print-header {
    margin-bottom: 24px !important;
    padding-bottom: 8px !important;
    border-bottom: 1.5px solid #111827 !important;
  }
  .print-header-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    font-family: Arial, sans-serif !important;
    font-size: 9pt !important;
    color: #374151 !important;
    line-height: 1.4 !important;
  }
  .print-header-left {
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
    gap: 3px !important;
  }
  .print-header-right {
    display: flex !important;
    flex-direction: column !important;
    text-align: right !important;
    gap: 3px !important;
  }
  .print-header-right .print-author {
    font-weight: 800 !important;
    color: #111827 !important;
    font-size: 10.5pt !important;
  }
  .print-header-right .print-filename {
    font-weight: 600 !important;
    color: #4B5563 !important;
  }
  .print-divider {
    display: none !important;
  }
  .print-footer {
    margin-top: 40px !important;
    padding-top: 16px !important;
    border-top: 1.5px solid #111827 !important;
    font-family: Arial, sans-serif !important;
    font-size: 9pt !important;
    line-height: 1.55 !important;
    color: #1F2937 !important;
    page-break-inside: avoid !important;
  }
  .print-footer-box p {
    margin: 0 0 8px 0 !important;
  }
  .print-copyright {
    font-size: 9.5pt !important;
    color: #000000 !important;
  }
  .print-source a {
    color: #0A2147 !important;
    text-decoration: underline !important;
    word-break: break-all !important;
  }
}