/* =========================
   SHAPES DECORATIVOS
========================= */
.shape {
  position: absolute;
  z-index: 1; /* antes estava 0 */
  opacity: 0.3;
  pointer-events: none;
}

/* Ajuste cada shape em seções diferentes */
.hero .shape-1 { top: 40px; left: 40px; width: 300px; }
.hero .shape-2 { 
  bottom: -20px; 
  right: 100px; 
  width: 150px; }

#servicos .shape-3 { top: 50px; right: -30px; width: 100px; }
#portfolio .shape-2 { bottom: -30px; left: 20px; width: 150px; }
#contato .shape-4 { bottom: -40px; right: 30px; width: 160px; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

.shape-1, .shape-2, .shape-3, .shape-4 {
  animation: float 8s ease-in-out infinite;
}