/* Logo 3D da seção Quem Somos */
.about-logo-3d {
  isolation: isolate;
  position: relative;
  min-height: clamp(340px, 40vw, 560px);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  overflow: visible;
  touch-action: pan-y;
}

.about-logo-3d::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(110%, 820px);
  height: min(110%, 820px);
  background: radial-gradient(
    circle,
    rgba(160, 60, 255, .78) 0%,
    rgba(120, 30, 240, .48) 30%,
    rgba(224, 64, 251, .22) 58%,
    transparent 75%
  );
  filter: blur(55px);
  pointer-events: none;
  z-index: 0;
  animation: logoGlowPulse 5s ease-in-out infinite;
}

.about-logo-3d::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(70%, 480px);
  height: min(70%, 480px);
  background: radial-gradient(
    circle,
    rgba(224, 64, 251, .35) 0%,
    rgba(123, 47, 255, .20) 40%,
    transparent 70%
  );
  filter: blur(30px);
  pointer-events: none;
  z-index: 0;
  animation: logoGlowPulse 5s ease-in-out infinite reverse;
}

@keyframes logoGlowPulse {
  0%, 100% { opacity: .85; transform: scale(1);   }
  50%       { opacity: 1;   transform: scale(1.12); }
}

.about-logo-3d__stage,
.about-logo-3d__fallback {
  width: 100%;
  max-width: 620px;
  aspect-ratio: 1.1;
  position: relative;
  margin: 0 auto;
  z-index: 1;
}

.about-logo-3d__stage {
  display: none;
  overflow: visible;
  margin: 0 auto;
  touch-action: pan-y;
}

.about-logo-3d__stage canvas {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  display: block;
  margin: 0 auto;
  touch-action: pan-y;
  filter:
    drop-shadow(0 0 50px rgba(160, 60, 255, .60))
    drop-shadow(0 30px 50px rgba(9, 0, 28, .55));
}

.about-logo-3d__fallback {
  width: 100%;
  max-width: 620px;
  display: block;
  margin: 0 auto;
  object-fit: contain;
  filter:
    drop-shadow(0 0 40px rgba(160, 60, 255, .65))
    drop-shadow(0 22px 60px rgba(108, 35, 212, .55));
}

.about-logo-3d.is-ready .about-logo-3d__stage {
  display: block;
}

.about-logo-3d.is-ready .about-logo-3d__fallback {
  display: none !important;
}

@media (max-width: 768px) {
  .about-logo-3d {
    min-height: clamp(280px, 85vw, 440px);
    width: 100%;
    margin: 0 auto;
    overflow: visible;
  }

  .about-logo-3d__stage,
  .about-logo-3d__fallback {
    width: min(100%, 480px);
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  .about-logo-3d {
    min-height: clamp(260px, 90vw, 380px);
    width: 100%;
    margin: 0 auto;
    overflow: visible;
  }

  .about-logo-3d__stage,
  .about-logo-3d__fallback {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
  }
}