/* ══════════════════════════════════════════════════
   LIQUID GLASS SYSTEM — glass.css
   Aplica efeito glassmorphism / liquid-glass em todo o site
   Importar APÓS style.css em todos os HTMLs
   ══════════════════════════════════════════════════ */

/* ─── Tokens de vidro ──────────────────────────── */
:root {
  /* Vidro claro — seções creme/bg */
  --gl:        rgba(255,255,255,0.56);
  --gl-h:      rgba(255,255,255,0.72);
  --gl-bdr:    rgba(255,255,255,0.80);
  --gl-shine:  inset 0 1px 0 rgba(255,255,255,0.92), inset 1px 0 0 rgba(255,255,255,0.48), inset -1px 0 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(13,77,150,0.06);
  --gl-shad:   0 4px 28px rgba(13,77,150,0.10), 0 1px 4px rgba(13,77,150,0.06);
  --gl-shad-h: 0 10px 44px rgba(13,77,150,0.16), 0 2px 8px rgba(13,77,150,0.08);

  /* Vidro escuro — seções navy/dark */
  --gd:        rgba(255,255,255,0.055);
  --gd-h:      rgba(255,255,255,0.09);
  --gd-bdr:    rgba(255,255,255,0.13);
  --gd-shine:  inset 0 1px 0 rgba(255,255,255,0.18), inset 1px 0 0 rgba(255,255,255,0.08);
  --gd-shad:   0 4px 28px rgba(0,0,0,0.30), 0 1px 6px rgba(0,0,0,0.20);
  --gd-shad-h: 0 10px 40px rgba(0,0,0,0.38), 0 2px 10px rgba(0,0,0,0.22);

  /* Blur padrão */
  --gl-blur:   blur(20px) saturate(1.6) brightness(1.02);
  --gd-blur:   blur(22px) saturate(1.5);
}

/* ══════════════════════════════════════════════════
   MIXIN SHIMMER — reutilizado em cards interativos
   ══════════════════════════════════════════════════ */
/* Shimmer claro (seções light) */
.srv-card::after,
.tc::after,
.ch::after,
.ccard::after,
.gs-tab::after,
.en::after,
.emp-block::after,
.ig-card::after,
.lp-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg,
    transparent 28%,
    rgba(255,255,255,0.14) 50%,
    transparent 72%);
  transform: translateX(-130%) skewX(-12deg);
  transition: transform 0.65s cubic-bezier(0.16,1,0.3,1);
  pointer-events: none;
  border-radius: inherit;
  mix-blend-mode: overlay;
  z-index: 0;
}
.srv-card:hover::after,
.tc:hover::after,
.ch:hover::after,
.ccard:hover::after,
.gs-tab:hover::after,
.en:hover::after,
.emp-block:hover::after,
.ig-card:hover::after,
.lp-card:hover::after {
  transform: translateX(130%) skewX(-12deg);
}

/* Shimmer escuro (seções dark) */
.met-cell::after,
.dep-card::after,
.ni::after,
.gp-content::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg,
    transparent 28%,
    rgba(255,255,255,0.07) 50%,
    transparent 72%);
  transform: translateX(-130%) skewX(-12deg);
  transition: transform 0.65s cubic-bezier(0.16,1,0.3,1);
  pointer-events: none;
  border-radius: inherit;
  mix-blend-mode: overlay;
  z-index: 0;
}
.met-cell:hover::after,
.dep-card:hover::after,
.ni:hover::after {
  transform: translateX(130%) skewX(-12deg);
}


/* ══════════════════════════════════════════════════
   NAV — vidro aprimorado
   ══════════════════════════════════════════════════ */
#nav {
  background: rgba(239,236,233,0.65) !important;
  backdrop-filter: blur(32px) saturate(2.2) brightness(1.06) !important;
  -webkit-backdrop-filter: blur(32px) saturate(2.2) brightness(1.06) !important;
  border-bottom: 1px solid rgba(255,255,255,0.70) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.90),
    0 1px 0 rgba(13,77,150,0.06),
    0 4px 32px rgba(13,26,46,0.08) !important;
}

/* Botão de contato — vidro */
.nav-contact-btn {
  background: rgba(255,255,255,0.52) !important;
  backdrop-filter: blur(12px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.4) !important;
  border: 1px solid rgba(255,255,255,0.72) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 2px 12px rgba(39,127,228,0.10) !important;
}
.nav-contact-btn:hover {
  background: var(--green) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 6px 20px rgba(39,127,228,0.32) !important;
}

/* Dropdown contato */
.nav-contact-drop {
  background: rgba(13,26,46,0.82) !important;
  backdrop-filter: blur(24px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.5) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: var(--gd-shine), 0 16px 48px rgba(0,0,0,0.35) !important;
}

/* Drawer lateral */
.nd-panel {
  background: rgba(13,26,46,0.85) !important;
  backdrop-filter: blur(32px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.6) !important;
  border-left: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: var(--gd-shine), -24px 0 80px rgba(0,0,0,0.40) !important;
}


/* ══════════════════════════════════════════════════
   SPLASH — vidro suave
   ══════════════════════════════════════════════════ */
#splash {
  background: rgba(239,236,233,0.85) !important;
  backdrop-filter: blur(40px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(40px) saturate(1.8) !important;
}
.splash-bar {
  background: rgba(255,255,255,0.60) !important;
  border: 1px solid rgba(255,255,255,0.80) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.90) !important;
}


/* ══════════════════════════════════════════════════
   HERO — vidro nos elementos internos
   ══════════════════════════════════════════════════ */
/* Badge eyebrow */
.eyebrow {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: var(--gd-shine);
  padding: 6px 16px 6px 12px;
  border-radius: 20px;
  width: fit-content;
}

/* Botão secundário do hero — já tem vidro, aprimora */
.btn-g {
  backdrop-filter: blur(20px) saturate(1.6) brightness(1.08) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.6) brightness(1.08) !important;
  border: 1px solid rgba(255,255,255,0.38) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(0,0,0,0.08),
    0 6px 24px rgba(13,26,46,0.22) !important;
}

/* Scroll indicator */
.hero-scroll {
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: var(--gd-shine);
  padding: 10px 14px 10px;
  border-radius: 20px;
}


/* ══════════════════════════════════════════════════
   LOGOS BAR
   ══════════════════════════════════════════════════ */
#logos-bar {
  background: rgba(239,236,233,0.70) !important;
  backdrop-filter: blur(16px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
  border-bottom: 1px solid rgba(255,255,255,0.68) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 2px 16px rgba(13,26,46,0.05) !important;
}


/* ══════════════════════════════════════════════════
   MÉTRICAS — dark glass
   ══════════════════════════════════════════════════ */
.met-cell {
  background: var(--gd) !important;
  backdrop-filter: var(--gd-blur) !important;
  -webkit-backdrop-filter: var(--gd-blur) !important;
  border: none !important;
  border-right: 1px solid rgba(255,255,255,0.07) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: var(--gd-shine) !important;
  position: relative;
  overflow: hidden;
}
.met-cell:hover {
  background: var(--gd-h) !important;
  box-shadow: var(--gd-shine), var(--gd-shad-h) !important;
}
.met-grid {
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}


/* ══════════════════════════════════════════════════
   NOSSOS SERVIÇOS — light glass
   ══════════════════════════════════════════════════ */
.srv-grid {
  gap: 16px !important;
}
.srv-card {
  background: var(--gl) !important;
  backdrop-filter: var(--gl-blur) !important;
  -webkit-backdrop-filter: var(--gl-blur) !important;
  border: 1px solid var(--gl-bdr) !important;
  border-radius: 18px !important;
  box-shadow: var(--gl-shine), var(--gl-shad) !important;
  position: relative;
  overflow: hidden;
}
.srv-card:hover {
  background: var(--gl-h) !important;
  box-shadow: var(--gl-shine), var(--gl-shad-h) !important;
}


/* ══════════════════════════════════════════════════
   GRUPO — SIDEBAR + PANELS
   ══════════════════════════════════════════════════ */
/* Tabs da sidebar */
.gs-tab {
  background: var(--gl) !important;
  backdrop-filter: var(--gl-blur) !important;
  -webkit-backdrop-filter: var(--gl-blur) !important;
  border: 1px solid var(--gl-bdr) !important;
  border-radius: 14px !important;
  box-shadow: var(--gl-shine), var(--gl-shad) !important;
  position: relative;
  overflow: hidden;
}
.gs-tab:hover:not(.active) {
  background: var(--gl-h) !important;
}
.gs-tab.active {
  background: var(--dark) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: var(--gd-shine), 0 8px 32px rgba(13,26,46,0.30) !important;
}

/* Painel de empresa */
.grupo-panel {
  border-radius: 24px !important;
  box-shadow: 0 28px 72px rgba(13,26,46,0.22), 0 2px 8px rgba(13,26,46,0.10) !important;
}
.gp-content {
  background: rgba(13,26,46,0.88) !important;
  backdrop-filter: blur(28px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.5) !important;
  border-left: 1px solid rgba(255,255,255,0.07) !important;
  position: relative;
  overflow: hidden;
}
.gp-tag {
  background: rgba(255,255,255,0.07) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15) !important;
}


/* ══════════════════════════════════════════════════
   SOLUÇÕES — SLIDER
   ══════════════════════════════════════════════════ */
/* Badge flutuante */
.sp-badge {
  background: rgba(13,26,46,0.72) !important;
  backdrop-filter: blur(20px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.5) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow: var(--gd-shine), 0 8px 24px rgba(0,0,0,0.28) !important;
  border-radius: 24px !important;
}

/* Frame decorativo */
.sp-frame {
  border: 1.5px solid rgba(39,127,228,0.28) !important;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.04) 0%,
    rgba(39,127,228,0.04) 50%,
    rgba(255,255,255,0.02) 100%) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  border-radius: 24px !important;
}

/* Navegação dots — o botão é só a área de toque (24x24, transparente);
   quem é pintado é o ::before, que é o ponto de 8px. Pintar o botão
   aqui reenchia o alvo inteiro e o ponto virava um bloco. */
.sd { background: none !important; border: none !important; }
.sd::before {
  background: rgba(255,255,255,0.22) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
}
.sd.active::before {
  background: var(--green) !important;
  box-shadow: 0 0 0 3px rgba(39,127,228,0.25), inset 0 1px 0 rgba(255,255,255,0.4) !important;
}

/* Número de etapa — numeração da slide */
.sp-n {
  background: rgba(255,255,255,0.60);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
  padding: 3px 14px 3px 10px;
  border-radius: 20px;
  width: fit-content;
}


/* ══════════════════════════════════════════════════
   TECNOLOGIAS — light glass
   ══════════════════════════════════════════════════ */
.tgrid {
  gap: 12px !important;
}
.tc {
  background: var(--gl) !important;
  backdrop-filter: var(--gl-blur) !important;
  -webkit-backdrop-filter: var(--gl-blur) !important;
  border: 1px solid var(--gl-bdr) !important;
  border-radius: 18px !important;
  box-shadow: var(--gl-shine), var(--gl-shad) !important;
  position: relative;
  overflow: hidden;
}
.tc:hover {
  background: var(--gl-h) !important;
  box-shadow: var(--gl-shine), var(--gl-shad-h) !important;
  border-color: rgba(255,255,255,0.90) !important;
}


/* ══════════════════════════════════════════════════
   AMBIENTAL / DOCUMENTOS
   ══════════════════════════════════════════════════ */
.admin-panel {
  background: var(--gl) !important;
  backdrop-filter: var(--gl-blur) !important;
  -webkit-backdrop-filter: var(--gl-blur) !important;
  border: 1px solid var(--gl-bdr) !important;
  border-radius: 18px !important;
  box-shadow: var(--gl-shine), var(--gl-shad) !important;
}
.adm-hd {
  background: rgba(255,255,255,0.40) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.60) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85) !important;
}
.ccard {
  background: var(--gl) !important;
  backdrop-filter: var(--gl-blur) !important;
  -webkit-backdrop-filter: var(--gl-blur) !important;
  border: 1px solid var(--gl-bdr) !important;
  border-radius: 18px !important;
  box-shadow: var(--gl-shine), var(--gl-shad) !important;
  position: relative;
  overflow: hidden;
}
.ccard:hover {
  background: var(--gl-h) !important;
  box-shadow: var(--gl-shine), var(--gl-shad-h) !important;
}

/* Filtros */
.fb, .efb {
  background: rgba(255,255,255,0.50) !important;
  backdrop-filter: blur(12px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.4) !important;
  border: 1px solid rgba(255,255,255,0.72) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85) !important;
}
.fb.active, .fb:hover, .efb.active, .efb:hover {
  background: rgba(39,127,228,0.15) !important;
  border-color: rgba(39,127,228,0.40) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), 0 2px 12px rgba(39,127,228,0.12) !important;
}

/* Lightbox */
.lb-box {
  background: var(--gl) !important;
  backdrop-filter: blur(32px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.8) !important;
  border: 1px solid var(--gl-bdr) !important;
  border-radius: 20px !important;
  box-shadow: var(--gl-shine), 0 40px 100px rgba(13,26,46,0.25) !important;
}


/* ══════════════════════════════════════════════════
   IMPACTO / NÚMEROS — dark glass
   ══════════════════════════════════════════════════ */
.ngrid {
  background: rgba(255,255,255,0.03) !important;
  backdrop-filter: blur(16px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 16px !important;
}
.ni {
  background: transparent !important;
  backdrop-filter: none !important;
  border-right: 1px solid rgba(255,255,255,0.09) !important;
  position: relative;
  overflow: hidden;
}
.ni:hover {
  background: rgba(255,255,255,0.05) !important;
}
.impactometro {
  background: rgba(255,255,255,0.05) !important;
  backdrop-filter: blur(24px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.5) !important;
  border: 1px solid rgba(255,255,255,0.13) !important;
  border-radius: 20px !important;
  box-shadow: var(--gd-shine), var(--gd-shad) !important;
}


/* ══════════════════════════════════════════════════
   MAPA
   ══════════════════════════════════════════════════ */
.membed {
  border: 1px solid rgba(255,255,255,0.70) !important;
  box-shadow: var(--gl-shine), var(--gl-shad) !important;
  border-radius: 18px !important;
}
.ai {
  background: rgba(255,255,255,0.52);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
  border-radius: 12px;
  padding: 12px 16px;
  transition: background .25s, box-shadow .25s;
}
.ai:hover {
  background: rgba(255,255,255,0.70);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), var(--gl-shad-h);
}


/* ══════════════════════════════════════════════════
   CONTATO — light glass
   ══════════════════════════════════════════════════ */
.ch {
  background: var(--gl) !important;
  backdrop-filter: var(--gl-blur) !important;
  -webkit-backdrop-filter: var(--gl-blur) !important;
  border: 1px solid var(--gl-bdr) !important;
  border-radius: 14px !important;
  box-shadow: var(--gl-shine), var(--gl-shad) !important;
  position: relative;
  overflow: hidden;
}
.ch:hover {
  background: var(--gl-h) !important;
  box-shadow: var(--gl-shine), var(--gl-shad-h) !important;
  transform: translateX(4px) !important;
}

/* Formulário de contato */
.fg input, .fg select, .fg textarea {
  background: rgba(255,255,255,0.62) !important;
  backdrop-filter: blur(10px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.3) !important;
  border: 1px solid rgba(255,255,255,0.75) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), inset 0 2px 8px rgba(13,77,150,0.04) !important;
}
.fg input:focus, .fg select:focus, .fg textarea:focus {
  background: rgba(255,255,255,0.82) !important;
  border-color: rgba(39,127,228,0.55) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.90), 0 0 0 3px rgba(39,127,228,0.14) !important;
}


/* ══════════════════════════════════════════════════
   EMPRESAS
   ══════════════════════════════════════════════════ */
/* Tabs de empresa */
.emp-tabs {
  background: rgba(255,255,255,0.52) !important;
  backdrop-filter: blur(20px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.5) !important;
  border: 1px solid var(--gl-bdr) !important;
  border-radius: 14px !important;
  box-shadow: var(--gl-shine), var(--gl-shad) !important;
}
.emp-tab {
  transition: background .22s, color .22s !important;
}
.emp-tab:hover {
  background: rgba(255,255,255,0.60) !important;
}
.emp-tab.active {
  background: var(--green) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 4px 20px rgba(39,127,228,0.30) !important;
}

/* Cards de número */
.en {
  background: var(--gl) !important;
  backdrop-filter: var(--gl-blur) !important;
  -webkit-backdrop-filter: var(--gl-blur) !important;
  border: 1px solid var(--gl-bdr) !important;
  border-radius: 14px !important;
  box-shadow: var(--gl-shine), var(--gl-shad) !important;
  position: relative;
  overflow: hidden;
}

/* Blocos de info das empresas */
.emp-block {
  background: var(--gl) !important;
  backdrop-filter: var(--gl-blur) !important;
  -webkit-backdrop-filter: var(--gl-blur) !important;
  border: 1px solid var(--gl-bdr) !important;
  border-radius: 18px !important;
  box-shadow: var(--gl-shine), var(--gl-shad) !important;
  position: relative;
  overflow: hidden;
}
.emp-block:hover {
  background: var(--gl-h) !important;
  box-shadow: var(--gl-shine), var(--gl-shad-h) !important;
}
.emp-block-ico {
  background: rgba(255,255,255,0.68) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,0.82) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.90) !important;
}

/* Tech tags */
.tech-tag {
  background: rgba(255,255,255,0.55) !important;
  backdrop-filter: blur(8px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.3) !important;
  border: 1px solid rgba(255,255,255,0.78) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.90) !important;
}
.tech-tag:hover {
  background: var(--green) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 4px 16px rgba(39,127,228,0.28) !important;
}


/* ══════════════════════════════════════════════════
   VÍDEO EM DESTAQUE
   ══════════════════════════════════════════════════ */
.video-wrap {
  border-radius: 24px !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.12),
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 40px 100px rgba(0,0,0,0.60) !important;
}


/* ══════════════════════════════════════════════════
   PARCEIROS — dark glass
   ══════════════════════════════════════════════════ */
.dep-card {
  background: var(--gd) !important;
  backdrop-filter: var(--gd-blur) !important;
  -webkit-backdrop-filter: var(--gd-blur) !important;
  border: 1px solid var(--gd-bdr) !important;
  border-radius: 18px !important;
  box-shadow: var(--gd-shine), var(--gd-shad) !important;
  position: relative;
  overflow: hidden;
}
.dep-card:hover {
  background: var(--gd-h) !important;
  box-shadow: var(--gd-shine), var(--gd-shad-h) !important;
}

/* Logos parceiros */
.parc-logo-wrap {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 16px 24px;
  box-shadow: var(--gd-shine);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s, box-shadow .3s;
}
.parc-logo-wrap:hover {
  background: rgba(255,255,255,0.10);
  box-shadow: var(--gd-shine), 0 8px 24px rgba(0,0,0,0.20);
}


/* ══════════════════════════════════════════════════
   EVENTOS / INSTAGRAM
   ══════════════════════════════════════════════════ */

.ig-card {
  background: var(--gl) !important;
  backdrop-filter: var(--gl-blur) !important;
  -webkit-backdrop-filter: var(--gl-blur) !important;
  border: 1px solid var(--gl-bdr) !important;
  border-radius: 16px !important;
  box-shadow: var(--gl-shine), var(--gl-shad) !important;
  position: relative;
  overflow: hidden;
}
.ig-card:hover {
  background: var(--gl-h) !important;
  box-shadow: var(--gl-shine), var(--gl-shad-h) !important;
}

/* Contadores de eventos */
.ev-counters {
  background: var(--gl) !important;
  backdrop-filter: var(--gl-blur) !important;
  -webkit-backdrop-filter: var(--gl-blur) !important;
  border: 1px solid var(--gl-bdr) !important;
  border-radius: 16px !important;
  box-shadow: var(--gl-shine), var(--gl-shad) !important;
  overflow: hidden;
}
.ev-cnt {
  border-right: 1px solid rgba(255,255,255,0.55) !important;
}


/* ══════════════════════════════════════════════════
   FOOTER — dark glass nos links sociais + bottom bar
   ══════════════════════════════════════════════════ */
footer {
  background: rgba(13,26,46,0.94) !important;
  backdrop-filter: blur(16px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.3) !important;
  border-top: 1px solid rgba(255,255,255,0.10) !important;
}
.f-soc a {
  background: rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(12px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.3) !important;
  border: 1px solid rgba(255,255,255,0.13) !important;
  box-shadow: var(--gd-shine) !important;
  transition: all .25s !important;
}
.f-soc a:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(127,196,255,0.45) !important;
  box-shadow: var(--gd-shine), 0 4px 16px rgba(39,127,228,0.20) !important;
}


/* ══════════════════════════════════════════════════
   TOAST & MODALS
   ══════════════════════════════════════════════════ */
#toast {
  background: rgba(13,26,46,0.82) !important;
  backdrop-filter: blur(28px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.6) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: var(--gd-shine), 0 16px 48px rgba(0,0,0,0.35) !important;
  border-radius: 12px !important;
}
.pwd-box {
  background: var(--gl) !important;
  backdrop-filter: blur(32px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.8) !important;
  border: 1px solid var(--gl-bdr) !important;
  border-radius: 20px !important;
  box-shadow: var(--gl-shine), 0 32px 80px rgba(13,26,46,0.22) !important;
}
#pwd-in {
  background: rgba(255,255,255,0.65) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,0.80) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), inset 0 2px 6px rgba(13,77,150,0.05) !important;
}


/* ══════════════════════════════════════════════════
   PILLS & TAGS — vidro sutil
   ══════════════════════════════════════════════════ */
.pills span {
  background: rgba(255,255,255,0.55) !important;
  backdrop-filter: blur(8px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.3) !important;
  border: 1px solid rgba(255,255,255,0.78) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.88) !important;
}
.pills span:hover {
  background: rgba(39,127,228,0.14) !important;
  border-color: rgba(39,127,228,0.42) !important;
}
.srv-bullets span {
  background: rgba(255,255,255,0.58) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(255,255,255,0.80) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.90) !important;
}


/* ══════════════════════════════════════════════════
   LANDING PAGES — vidro nos cards e formulários
   ══════════════════════════════════════════════════ */

/* Botão voltar — topo das landing pages */
.lp-back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  color: rgba(255,255,255,0.65);
  font-family: 'Outfit', sans-serif; font-size: .78rem; font-weight: 500;
  letter-spacing: .04em;
  padding: 7px 14px 7px 10px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
  border-radius: 6px;
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
  white-space: nowrap;
}
.lp-back-btn:hover {
  background: rgba(255,255,255,0.14);
  color: #fff;
  border-color: rgba(255,255,255,0.30);
  transform: translateX(-2px);
}
.lp-back-btn svg { flex-shrink: 0; opacity: .75; transition: opacity .2s; }
.lp-back-btn:hover svg { opacity: 1; }

/* Header da landing */
.lp-header {
  background: rgba(13,26,46,0.82) !important;
  backdrop-filter: blur(28px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.6) !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: var(--gd-shine), 0 2px 20px rgba(0,0,0,0.30) !important;
}

/* Botão secundário da landing */
.lp-cta-secondary {
  backdrop-filter: blur(16px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.5) !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1.5px solid rgba(255,255,255,0.40) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.20) !important;
}
.lp-cta-secondary:hover {
  background: rgba(255,255,255,0.14) !important;
  border-color: rgba(255,255,255,0.68) !important;
}

/* Cards de benefício */
.lp-card {
  background: var(--gl) !important;
  backdrop-filter: var(--gl-blur) !important;
  -webkit-backdrop-filter: var(--gl-blur) !important;
  border: 1px solid var(--gl-bdr) !important;
  border-radius: 18px !important;
  box-shadow: var(--gl-shine), var(--gl-shad) !important;
  position: relative;
  overflow: hidden;
}
.lp-card:hover {
  background: var(--gl-h) !important;
  box-shadow: var(--gl-shine), var(--gl-shad-h) !important;
}
.lp-card-icon {
  background: rgba(255,255,255,0.70) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,0.85) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.92) !important;
  border-radius: 12px !important;
}

/* Trust bar */
.lp-trust {
  background: rgba(255,255,255,0.50) !important;
  backdrop-filter: blur(16px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
  border-top: 1px solid rgba(255,255,255,0.72) !important;
  border-bottom: 1px solid rgba(255,255,255,0.72) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.90) !important;
}

/* Stats da landing (seção dark) */
.lp-stats-grid > div,
.lp-stats > .lp-stats-grid > * {
  background: rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(16px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 16px !important;
  padding: 28px 20px !important;
  box-shadow: var(--gd-shine) !important;
}

/* Formulário da landing */
.lp-form {
  background: var(--gl) !important;
  backdrop-filter: var(--gl-blur) !important;
  -webkit-backdrop-filter: var(--gl-blur) !important;
  border: 1px solid var(--gl-bdr) !important;
  border-radius: 20px !important;
  box-shadow: var(--gl-shine), var(--gl-shad) !important;
}
.lp-form-group input,
.lp-form-group textarea,
.lp-form-group select {
  background: rgba(255,255,255,0.68) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,0.80) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.88), inset 0 2px 6px rgba(13,77,150,0.04) !important;
}
.lp-form-group input:focus,
.lp-form-group textarea:focus {
  background: rgba(255,255,255,0.85) !important;
  border-color: rgba(39,127,228,0.55) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.90), 0 0 0 3px rgba(39,127,228,0.13) !important;
}

/* Eyebrow da landing hero */
.lp-eyebrow {
  background: rgba(65,190,96,0.15) !important;
  backdrop-filter: blur(10px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.3) !important;
  border: none !important;
  border-bottom: 2px solid var(--accent) !important;
  box-shadow: none !important;
  padding: 4px 12px 4px 0 !important;
}

/* Tabelas de comparação (se existirem) e feature lists */
.lp-features-grid > *,
.lp-process-step,
.lp-compare-row {
  background: var(--gl);
  backdrop-filter: var(--gl-blur);
  -webkit-backdrop-filter: var(--gl-blur);
  border: 1px solid var(--gl-bdr);
  border-radius: 14px;
  box-shadow: var(--gl-shine), var(--gl-shad);
}


/* ══════════════════════════════════════════════════
   PUBLICAÇÕES — vidro nos cards internos
   ══════════════════════════════════════════════════ */
.pub-card, .pub-item {
  background: var(--gl);
  backdrop-filter: var(--gl-blur);
  -webkit-backdrop-filter: var(--gl-blur);
  border: 1px solid var(--gl-bdr);
  border-radius: 16px;
  box-shadow: var(--gl-shine), var(--gl-shad);
}


/* ══════════════════════════════════════════════════
   AMBIENT LIGHT — orbs de luz nas seções
   ══════════════════════════════════════════════════ */
/* Adiciona aura suave de luz nos headers de seção */
.sec-head::before {
  content: '';
  position: absolute;
  width: 400px; height: 200px;
  top: -80px; left: 50%; transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(39,127,228,0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.sec-head { position: relative; }


/* ══════════════════════════════════════════════════
   PERFORMANCE — desativa backdrop-filter em mobile
   para evitar lentidão em dispositivos fracos
   ══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Reduz blur em mobile */
  :root {
    --gl-blur: blur(12px) saturate(1.3);
    --gd-blur: blur(14px) saturate(1.3);
  }
}

/* Respeita prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .srv-card::after, .tc::after, .ch::after, .ccard::after,
  .gs-tab::after, .en::after, .emp-block::after,
  .ig-card::after, .lp-card::after,
  .met-cell::after, .dep-card::after, .ni::after, .gp-content::after {
    display: none;
  }
}

/* Fallback para browsers sem backdrop-filter */
@supports not (backdrop-filter: blur(1px)) {
  .srv-card { background: rgba(245,242,238,0.97) !important; }
  .met-cell { background: rgba(255,255,255,0.06) !important; }
  .dep-card { background: rgba(255,255,255,0.06) !important; }
  .lp-card  { background: rgba(245,242,238,0.97) !important; }
  .lp-form  { background: rgba(245,242,238,0.97) !important; }
  #nav      { background: rgba(239,236,233,0.97) !important; }
  .lp-header { background: rgba(13,26,46,0.97) !important; }
}