/* Experimento: campo fluido no fundo, independente dos sinais SVG aprovados. */
#abertura { background: #0b1f3a; }
#abertura .hero-atmosphere {
  inset: 0;
  width: 100%;
  height: min(100%, 920px);
  transform: none;
  overflow: hidden;
  contain: strict;
  mask-image: linear-gradient(transparent, #000 14%, #000 78%, transparent 100%);
  background:
    linear-gradient(124deg, transparent 12%, #0a384e 35%, transparent 60%),
    linear-gradient(48deg, #0b1f3a 8%, #0c4d5a 37%, #0b1f3a 58%, #116971 80%, #0b1f3a 98%);
}
#abertura .hero-fluid-canvas { position: absolute; inset: 0; opacity: .58; }
#abertura .hero-fluid-canvas canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  contain: strict;
  pointer-events: none;
}
/* A máscara escura protege título e ilustração; o movimento aparece nas laterais. */
#abertura .hero-atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 46% 74% at 50% 48%, #0b1f3a 5%, #0b1f3af7 55%, #0b1f3aa6 78%, #0b1f3a10 100%),
    linear-gradient(180deg, transparent 35%, #0b1f3a99 65%, #0b1f3af2 90%, #0b1f3a 100%);
}
@media (max-width: 640px) {
  #abertura .hero-atmosphere::after {
    background:
      radial-gradient(ellipse 48% 78% at 50% 43%, #0b1f3a 10%, #0b1f3af5 55%, #0b1f3aaf 80%, #0b1f3a26),
      linear-gradient(180deg, transparent 38%, #0b1f3a99 67%, #0b1f3a 100%);
  }
}