/* Setores atendidos — efeito de vidro translúcido em toda a seção */

#setores {
  --setores-glass: rgba(14, 28, 52, 0.38);
  --setores-glass-edge: rgba(255, 255, 255, 0.14);
  --setores-glass-glow: rgba(125, 211, 252, 0.08);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--setores-glass) !important;
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  backdrop-filter: blur(22px) saturate(165%);
  border-top: 1px solid var(--setores-glass-edge);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 24px 64px rgba(0, 0, 0, 0.22);
}

/* Reflexo / brilho de vidro */
#setores::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.03) 28%,
      transparent 52%
    ),
    radial-gradient(80% 60% at 15% 0%, var(--setores-glass-glow), transparent 55%),
    radial-gradient(70% 50% at 90% 100%, rgba(56, 189, 248, 0.06), transparent 50%);
}

/* Conteúdo acima da camada de vidro */
#setores > * {
  position: relative;
  z-index: 1;
}

/* Painéis internos também em vidro */
#setores .rounded-xl,
#setores .aspect-\[4\/3\],
#setores [class*="aspect-"] {
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

#setores button {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

#setores button:not(.bg-gold-400) {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

#setores h2,
#setores p {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

/* Garante o vidro mesmo com o modo cinematográfico do robô */
body.robot-cinematic #setores {
  background: rgba(14, 28, 52, 0.4) !important;
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  backdrop-filter: blur(22px) saturate(165%);
}

@media (prefers-reduced-motion: reduce) {
  #setores {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}