/* Nébulas estáticas em camadas, dentro da paleta laranja e branca. */
#planos.fx-section::after,
#savtv-promo.fx-section::after,
#servicos.fx-section::after,
#mapa.fx-section::after,
#sobre.fx-section::after,
#atc.fx-section::after,
.cta-section.fx-section::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  background:
    radial-gradient(ellipse 54% 46% at 83% 18%, rgba(255,255,255,.42), transparent 70%),
    radial-gradient(ellipse 42% 48% at 15% 80%, rgba(255,244,233,.34), transparent 72%),
    radial-gradient(ellipse 42% 35% at 54% 51%, rgba(255,222,196,.28), transparent 74%) !important;
  filter: blur(8px);
}

/* Mantém imagem, conteúdo e a malha digital acima do efeito. */
.fx-section > .codex-grid { z-index: 1; }
.fx-section > .container,
.fx-section > .carousel,
.fx-section > .carousel + button,
.fx-section > .carousel ~ button { z-index: 2; }

/* Na seção ATC, a marca aparece sobre a foto e abaixo das informações. */
#atc .brand-watermark { z-index: 2; opacity: .13; }
#atc .codex-grid { z-index: 2; }
#atc .atc-content { position: relative; z-index: 3; }

/* Ícone Savnet como marca d'água diagonal entre a nébula e o conteúdo. */
.brand-watermark {
  position: absolute;
  z-index: 0;
  width: clamp(260px, 31vw, 520px);
  opacity: .16;
  pointer-events: none;
  filter: brightness(0) invert(1) drop-shadow(0 12px 34px rgba(255,255,255,.22));
  transform: rotate(-25deg);
  right: 5%;
  top: 15%;
  animation: watermark-flow 18s ease-in-out infinite alternate;
  will-change: transform;
}
.fx-section > .brand-watermark { position: absolute !important; }
/* A marca fica presa à própria seção. Assim ela acompanha o fundo correto,
   sem atravessar ou aparecer cortada na troca entre blocos. */
.fx-section > .brand-watermark {
  display: block !important;
  width: clamp(180px, 22vw, 340px);
  opacity: .075;
  animation: watermark-drift-visible 11s ease-in-out infinite alternate !important;
  will-change: transform;
}
.fx-section > .brand-watermark--medium { display: none !important; }

/* Na SavTV, mantemos a marca da esquerda junto da marca do título e retiramos
   a que ficava no canto direito inferior. */
#savtv-promo > .brand-watermark:not(.brand-watermark--medium) { display: none !important; }
#savtv-promo > .brand-watermark--medium {
  display: block !important;
  width: clamp(130px, 16vw, 250px);
  opacity: .06;
  animation: watermark-drift-visible 13s ease-in-out 1s infinite alternate !important;
  will-change: transform;
}
.fx-section > .brand-watermark--small { display: none !important; }

/* Campo contínuo de marcas d'água por toda a página. */
body { position: relative; }
.global-watermark-field {
  position: absolute;
  inset: 0;
  min-height: 100%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.global-watermark {
  position: absolute;
  width: var(--wm-size);
  left: var(--wm-left);
  top: var(--wm-top);
  opacity: var(--wm-opacity, .10);
  filter: brightness(0) invert(1) drop-shadow(0 12px 34px rgba(255,255,255,.20));
  transform: rotate(var(--wm-rotation));
  animation: none !important;
  will-change: auto;
}
.global-watermark img { width: 100%; display: block; }
@keyframes global-watermark-flow {
  0% { transform: translate3d(0,0,0) rotate(var(--wm-rotation)) scale(1); }
  50% { transform: translate3d(var(--wm-drift-x), var(--wm-drift-y), 0) rotate(calc(var(--wm-rotation) + 5deg)) scale(1.04); }
  100% { transform: translate3d(calc(var(--wm-drift-x) * -.65), calc(var(--wm-drift-y) * -.65), 0) rotate(calc(var(--wm-rotation) - 3deg)) scale(1.01); }
}
main, footer { position: relative; z-index: 1; }
.brand-watermark--left { left: 4%; right: auto; top: 22%; transform: rotate(28deg); animation-name: watermark-flow-left; }
.brand-watermark--medium {
  width: clamp(150px, 19vw, 290px);
  left: 7%;
  right: auto;
  top: auto;
  bottom: 9%;
  opacity: .09;
  transform: rotate(38deg);
  animation-name: watermark-flow-medium;
  animation-duration: 23s;
  animation-delay: -7s;
}
.brand-watermark--small {
  width: clamp(85px, 11vw, 165px);
  left: 47%;
  right: auto;
  top: 63%;
  opacity: .075;
  transform: rotate(-58deg);
  animation-name: watermark-flow-small;
  animation-duration: 15s;
  animation-delay: -3s;
}
.brand-watermark img { width: 100%; display: block; }
@keyframes watermark-flow {
  0% { transform: translate3d(0, 0, 0) rotate(-25deg) scale(1); }
  50% { transform: translate3d(-16px, 12px, 0) rotate(-20deg) scale(1.035); }
  100% { transform: translate3d(12px, -10px, 0) rotate(-28deg) scale(1.01); }
}
@keyframes watermark-flow-left {
  0% { transform: translate3d(0, 0, 0) rotate(28deg) scale(1); }
  50% { transform: translate3d(16px, -12px, 0) rotate(22deg) scale(1.035); }
  100% { transform: translate3d(-12px, 10px, 0) rotate(31deg) scale(1.01); }
}
@keyframes watermark-flow-medium {
  0% { transform: translate3d(0, 0, 0) rotate(38deg) scale(1); }
  50% { transform: translate3d(14px, -10px, 0) rotate(44deg) scale(1.04); }
  100% { transform: translate3d(-10px, 11px, 0) rotate(34deg) scale(1.01); }
}
@keyframes watermark-flow-small {
  0% { transform: translate3d(0, 0, 0) rotate(-58deg) scale(1); }
  50% { transform: translate3d(-9px, 13px, 0) rotate(-51deg) scale(1.05); }
  100% { transform: translate3d(10px, -8px, 0) rotate(-63deg) scale(1.02); }
}
@keyframes watermark-drift-visible {
  0% { transform: translate3d(0, 0, 0) rotate(var(--wm-rotation, -25deg)) scale(1); }
  50% { transform: translate3d(34px, -26px, 0) rotate(calc(var(--wm-rotation, -25deg) + 6deg)) scale(1.045); }
  100% { transform: translate3d(-22px, 18px, 0) rotate(calc(var(--wm-rotation, -25deg) - 4deg)) scale(1.01); }
}
@media (prefers-reduced-motion: reduce) { .brand-watermark { animation: none; } }
@media (max-width: 760px) { .brand-watermark { width: 230px; opacity: .10; } }