/* ========================================================================
   CARBONO — background padrão do site (marrom degradê + canvas 3D)
   Aplicado globalmente via _partials/head.html
   Marfim local em sections com classe .cb-marfim
   ======================================================================== */

/* Background degradê marrom em html/body (subroute e home) */
html,
html:has(body.subroute),
body,
body.subroute {
  background: #1a1108 !important;
  background-color: #1a1108 !important;
}

/* Degradê em camada fixa própria (evita background-attachment:fixed —
   custoso/ignorado no iOS Safari; camada fixed composita na GPU) */
body::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%);
}

/* Noise overlay sutil */
body::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;
}

/* Canvas carbono marrom global */
#cb-grid {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  width: 100vw !important;
  height: 100vh !important;
}

/* Transparentiza sections marrom pra deixar o carbono passar */
body > section,
body > main section,
main > section {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
}

/* Zera pseudo-elementos de section (que criavam camadas de cor) */
body > section::before,
body > section::after,
main section::before,
main section::after {
  display: none !important;
}

/* z-index acima do canvas pro conteúdo */
nav, footer, section, main { position: relative; z-index: 5; }
#nav, nav#nav { z-index: 50 !important; }

/* Remove bordas/molduras entre seções */
section {
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* ========================================================================
   SECTIONS MARFIM (.cb-marfim) — fundo claro com carbono marfim local
   ======================================================================== */
section.cb-marfim {
  background: #E8E6DF !important;
  background-image: none !important;
  color: #1B1814 !important;
  position: relative !important;
  z-index: 6 !important;
  overflow: hidden !important;
}
section.cb-marfim::before,
section.cb-marfim::after { display: none !important; }

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

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

/* Texto padrão em sections marfim */
section.cb-marfim h1,
section.cb-marfim h2,
section.cb-marfim h3 { color: #1B1814 !important; }
section.cb-marfim em { color: #A57F4F !important; }
section.cb-marfim p { color: #3a2e22 !important; }
section.cb-marfim .tag,
section.cb-marfim .cta-eyebrow { color: #A57F4F !important; }

/* Blocos com fundo escuro próprio (sjc-cultura, ve-head-pill) — texto CLARO
   OBS: .sobre-accent-box NÃO entra aqui — ele tem fundo marfim próprio (texto marrom escuro original) */
section.cb-marfim .sjc-cultura,
section.cb-marfim .sjc-cultura *,
section.cb-marfim .ve-head-pill,
section.cb-marfim .ve-head-pill * { color: #E8E6DF !important; }

section.cb-marfim .sjc-cultura em,
section.cb-marfim .ve-head-pill em { color: #E2C29B !important; }

section.cb-marfim .sjc-cultura .tag-sm,
section.cb-marfim .ve-head-pill .ve-tag { color: #CE9D62 !important; }

section.cb-marfim .sjc-cultura p,
section.cb-marfim .sjc-cultura li { color: rgba(232,230,223,.82) !important; }

/* Botão btn-outline em CTA marfim — texto e borda escuros */
section.cb-marfim .btn-outline {
  color: #1B1814 !important;
  border-color: rgba(27,24,20,.4) !important;
  background: transparent !important;
}
section.cb-marfim .btn-outline:hover {
  background: rgba(27,24,20,.06) !important;
  border-color: #A57F4F !important;
  color: #A57F4F !important;
}

/* Watermark do CTA escondido em sections marfim (era pro fundo escuro) */
section.cb-marfim .cta-watermark { display: none !important; }

/* ========================================================================
   AJUSTES POR PÁGINA — espaçamentos e detalhes
   ======================================================================== */

/* Reveals restaurados — bug raiz corrigido no site.js (guard do hamburger + fallback IO).
   Mantido apenas safety pra browsers sem IntersectionObserver via site.js. */

/* /jornada — esconder números ghost gigantes + link "4 camadas" */
.step-deco-num { display: none !important; }
#jornada .container > div[style*="margin-top:3.5rem"] { display: none !important; }
#jornada a.inner-link[href="/metodo"] { display: none !important; }

/* /planos — tabela comparativa transparente com leve glass */
#planos .comp-v2-section,
.comp-v2-section {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
}
.comp-v2-section::before, .comp-v2-section::after { display: none !important; }
.comp-v2-wrap {
  background: rgba(22,18,14,.72) !important;
}
/* blur só em desktop — caro no scroll mobile */
@media (min-width: 769px) {
  .comp-v2-wrap {
    background: rgba(22,18,14,.45) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}

/* /metodo — texto do hero "Quatro camadas" claro sobre fundo marrom */
#como h2, #como h2 * { color: #E8E6DF !important; }
#como h2 em { color: #CE9D62 !important; }
#como p { color: rgba(232,230,223,.78) !important; }

/* ========================================================================
   HERO HOME — chave watermark dourada (10% → 40% no hover proximidade)
   ======================================================================== */
.hero-bg { display: none !important; }
.hero-watermark {
  opacity: 1 !important;
  filter: none !important;
  position: absolute !important;
  left: 80vw !important;
  top: 40vh !important;
  right: auto !important;
  width: auto !important;
  height: 40vh !important;
  transform: translate(-50%, -50%) !important;
  transition: opacity .6s ease;
}
.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; }

/* ========================================================================
   FOOTER — App Store Badge (Opção B: branco puro)
   ======================================================================== */
.footer-apple-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  background: #fff;
  border: 1px solid #fff;
  border-radius: 10px;
  text-decoration: none;
  color: #000;
  font-family: -apple-system, 'SF Pro Display', 'Helvetica Neue', sans-serif;
  line-height: 1;
  margin-top: 16px;
  transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .25s ease;
}
.footer-apple-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(255,255,255,.2);
}
.footer-apple-badge svg {
  width: 24px;
  height: 30px;
  flex-shrink: 0;
}
.footer-apple-badge .b-top {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .02em;
  display: block;
  margin-bottom: 2px;
}
.footer-apple-badge .b-main {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.02em;
  display: block;
}