/* ═══════════════════════════════════════════
   GUIJO TECH — Universe Background
   Canvas fixo atrás de tudo. Seções ficam
   transparentes; cards mantêm glass sutil.
   ═══════════════════════════════════════════ */

/* ── Fixed canvas ── */
#universeCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
/* ── Tudo acima do canvas ── */
.hero-wrap, .strip, section, footer {
  position: relative;
  z-index: 1;
}
/* ── Remove solid section backgrounds ── */
body                    { background: #000 !important; }
.hero-wrap              { background: transparent !important; }
.strip                  { background: rgba(0,0,0,0.45) !important; }
.problems-section       { background: transparent !important; }
.cards-section          { background: rgba(0,0,0,0.35) !important; }
.portfolio-section      { background: transparent !important; }
.world-section          { background: transparent !important; }
.sobre-section          { background: rgba(0,0,0,0.3) !important; }
.processo-section       { background: rgba(0,0,0,0.35) !important; }
.cta-section            { background: rgba(0,0,0,0.4) !important; }
footer                  { background: rgba(0,0,0,0.6) !important; }

/* ── Cards: glass morphism leve ── */
.dif-card-lg,
.dif-card-sm            { background: rgba(255,255,255,0.04) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.dif-card-sm:hover      { background: rgba(255,255,255,0.07) !important; }

.problem-detail         { background: rgba(15,15,15,0.75) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.problem-item:hover,
.problem-item.active    { background: rgba(255,255,255,0.05) !important; }
.p-icon                 { background: rgba(255,255,255,0.06) !important; }

.port-browser           { background: rgba(10,10,10,0.8) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.browser-chrome         { background: rgba(20,20,20,0.9) !important; }
.bc-url                 { background: rgba(0,0,0,0.5) !important; }
.pm-card,
.pt-tag                 { background: rgba(255,255,255,0.05) !important; }

.step-panel             { background: rgba(15,15,15,0.75) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.step-row:hover,
.step-row.active        { background: rgba(255,255,255,0.05) !important; }
.step-num               { background: rgba(255,255,255,0.06) !important; }

.cta-counter            { background: rgba(255,255,255,0.04) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

.team-card              { background: rgba(255,255,255,0.04) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.team-photo             { background: rgba(255,90,31,0.1) !important; }
.team-skill             { background: rgba(255,255,255,0.06) !important; }

.sobre-dif-card         { background: rgba(255,255,255,0.04) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.sobre-dif-card:hover   { background: rgba(255,255,255,0.07) !important; }

.mock-topbar            { background: rgba(10,10,10,0.9) !important; }
.mock-metric            { background: rgba(255,255,255,0.06) !important; }
.mock-badge             { background: rgba(10,10,10,0.85) !important; backdrop-filter: blur(10px); }

.hero-mock              { background: rgba(10,10,10,0.8) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.mock-urlbar            { background: rgba(255,255,255,0.06) !important; }

.w-card                 { background: rgba(10,10,10,0.75) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

/* Nav already uses blur — just darken slightly */
nav                     { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 9999 !important; background: rgba(0,0,0,0.75) !important; backdrop-filter: blur(24px) saturate(180%) !important; -webkit-backdrop-filter: blur(24px) saturate(180%) !important; }
nav.scrolled            { background: rgba(0,0,0,0.82) !important; }
..nav-drawer             { z-index: 9998 !important; background: rgba(0,0,0,0.97) !important; }