/* Contato: luz difusa com áreas protegidas para título, canais e ações. */
#contato {
  isolation: isolate;
  background: #0b1f3a;
}

#contato .contact-mesh-background {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  background:
    radial-gradient(ellipse 48% 64% at 4% 83%, #155c634d, transparent 80%),
    radial-gradient(ellipse 46% 58% at 55% 100%, #315a594d, transparent 78%),
    radial-gradient(ellipse 32% 58% at 100% 48%, #16576340, transparent 82%),
    #0b1f3a;
}

#contato #contact-mesh-canvas {
  position: absolute;
  inset: 0;
  opacity: .8;
  pointer-events: none;
}

#contato #contact-mesh-canvas canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  contain: strict;
}

/* As nuvens aparecem nas bordas e na base; os dois blocos de conteúdo ficam escuros. */
#contato .contact-mesh-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, #0b1f3a 0%, #0b1f3ab3 12%, transparent 32%, transparent 78%, #0b1f3a 100%),
    radial-gradient(ellipse 40% 72% at 28% 38%, #0b1f3afc 0%, #0b1f3af2 42%, #0b1f3ab8 65%, transparent 100%),
    radial-gradient(ellipse 33% 64% at 77% 42%, #0b1f3afa 0%, #0b1f3af0 44%, #0b1f3ab3 68%, transparent 100%);
}

#contato[data-contact-motion="fallback"] #contact-mesh-canvas,
#contato[data-contact-motion="reduced"] #contact-mesh-canvas { display: none; }

@media (max-width: 640px) {
  #contato .contact-mesh-background::after {
    background:
      linear-gradient(180deg, #0b1f3a 0%, transparent 16%, transparent 84%, #0b1f3a 100%),
      radial-gradient(ellipse 77% 54% at 50% 25%, #0b1f3afc 0%, #0b1f3af0 50%, #0b1f3ac4 72%, transparent 100%),
      radial-gradient(ellipse 80% 54% at 50% 64%, #0b1f3afa 0%, #0b1f3aeb 48%, #0b1f3ab3 74%, transparent 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  #contato #contact-mesh-canvas { display: none !important; }
}