/* ========================================================================
   CARBONO — Blog Concierge Patrimonial
   Adaptado do site institucional para contexto editorial (fundo marfim)
   - Marfim local em .cb-marfim (dots marrom sutis)
   - Marrom global em .cb-marrom (dots dourados)
   ======================================================================== */

/* Canvas marrom global (nav/footer/hero escuro) */
#cb-grid {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  width: 100vw !important;
  height: 100vh !important;
  opacity: 0;
  transition: opacity 0.6s ease;
}
body.carbono-on #cb-grid { opacity: 1; }

/* Ativação global: fundo marrom escuro com carbono dourado */
body.cb-marrom-global {
  background: #1a1108 !important;
  color: var(--marfim) !important;
}
body.cb-marrom-global::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 30% 20%, rgba(74,53,32,.65), transparent 55%),
    radial-gradient(ellipse 70% 80% at 80% 70%, rgba(42,31,18,.6), transparent 60%),
    linear-gradient(135deg, #1a1108 0%, #221710 40%, #2a1f12 100%);
}
body.cb-marrom-global::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.35' numOctaves='3' seed='14' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.808  0 0 0 0 0.616  0 0 0 0 0.384  0 0 0 0.32 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 280px 280px;
  mix-blend-mode: overlay;
  opacity: .14;
}

/* Conteúdo acima dos canvas globais */
body.cb-marrom-global nav,
body.cb-marrom-global main,
body.cb-marrom-global footer,
body.cb-marrom-global section { position: relative; z-index: 5; }

/* ========================================================================
   SECTIONS MARFIM (.cb-marfim) — canvas local com dots marrom sutis
   ======================================================================== */
.cb-marfim {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.cb-grid-marfim-local {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  width: 100% !important;
  height: 100% !important;
}

.cb-marfim > .container,
.cb-marfim > *:not(canvas) {
  position: relative;
  z-index: 1;
}

/* ========================================================================
   HERO WATERMARK — chave dourada com glow por proximidade
   ======================================================================== */
.hero-watermark {
  position: absolute !important;
  right: 6vw !important;
  left: auto !important;
  top: 50% !important;
  width: auto !important;
  height: min(32vh, 320px) !important;
  transform: translateY(-50%) !important;
  z-index: 1; /* abaixo do .container (mesmo z, DOM posterior) — texto sempre acima */
  transition: opacity .6s ease;
  pointer-events: none;
}
.hero-watermark img {
  display: block;
  width: auto !important;
  height: 100% !important;
  opacity: .10;
  filter: brightness(0) saturate(100%) invert(72%) sepia(46%) saturate(513%) hue-rotate(353deg) brightness(95%) contrast(89%);
  transition: opacity .6s ease;
}
.hero-watermark.is-glow img { opacity: .40; }

@media (max-width: 860px) {
  .hero-watermark { display: none !important; }
}